Question

我有一个带有2个输入字段和文件上传表单的html表单，我想使用ajax将这些数据发送到某个index.php文件到目前为止我做了

<form class="col-md-3" id="form" name="reg" method="post" action="index.php" enctype="multipart/form-data">
  <label>Name</label>
  <input type="text" name="name" class="form-control" id="name">
  <label>Address</label>
  <input type="text" name="address" class="form-control">
  <div id="sugg">

  </div>
  <input type="file" name="file">
  <input type="button" name="submit" class="btn-default" id="btn" value="submit">
</form>

使用ajax发送数据的jquery是

$("#btn").click(function() {
  $.ajax({
    url: "index.php",
    type: "POST",
    data: new FormData($('form')[0]),
    cache: false,
    conentType: false,
    processData: false,
    success: function(result) {
      console.log(result);
    }
  });

});

php文件就是这个

echo $_POST["name"];

但在我的浏览器窗口中我是未定义的索引

我发现了类似的问题，但所有这些都没有解决我的问题，这就是为什么我请求你的帮助请帮助我找到我的错误

Answer 1

我根据自己的需要在代码下创建，您可以根据自己的要求进行更改：

单击上传/选择文件按钮时使用此功能：

$('input[type=file]').on('change', function(e){
        e.preventDefault();
        $this = $(this);
        if($this.prop("files")){
            if(setImagestoUpload(e, $this.prop("files"), $this.attr("name"))){
                var reader = new FileReader();
                reader.onload = function(e){
                    $('.brandLogo img').attr("src", e.target.result);

                    $this.parent().prev("img.imageSelection").attr("src", e.target.result);

                };
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
function setImagestoUpload(e, $file, name){
        e.preventDefault();
        var type = [];
        var isSize = [];

        $($file).each(function(i, v){
            type[i] = isImage(v);
            isSize[i] = isValidSize(2, v.size);
        });
        if($.inArray(false, type) === -1){
            if($.inArray(false, isSize) === -1){
                /*if(checkTotalFileInputs() > 1 && files.length>0){
                    $.each($file, function(ind, val){
                        files[name] = val;
                    });
                    files[name] = $file[0];
                }else{
                    files = $file;
                }*/
                formData.append(name, $file[0]);
                console.log(files);
                return true;
            }else{
                alert("Error: Upload max size limit 2MB");
            }
        }else{
            alert("Please select only image file format to upload !");
            return false;
        }
    }
function isImage(file){
    var type = file.type.split("/");
    if(type[0] === "image"){
        return true;
    }else{
        return false;
    }
}

当您提交表单时，请使用以下功能：

function fileAndFormSubmit(ev, $this, get, options){

        var defaults = {
            redirect : false,
            redirectTo : "#",
            redirectAfter : 5000
        };
        var settings = $.extend({}, defaults, options);
        removeErrorAndSuccess();
        var $form = $($this).parent('form');
        /*var formData = new FormData();
        if(files.length > 0){
            $.each(files, function(key, val){
                formData.append(key, val);
            });
        }*/
        var doc = {
            data : $form.serialize()
        };

        formData.append("doc", doc.data);

        /*Call to ajax here*/
    }

使用ajax在单个表单上上传文件和表单数据

1 个答案: