使用Ajax在單個表單上上傳文件和表單數據

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*/
    }