使用FormData上傳PHP AJAX圖像

Question

我對jQuery和Ajax函數比較陌生，但過去幾天一直在使用Ajax表單。 我遇到了文件上傳的問題，但是在嘗試上傳圖片時。 在尋找資源的同時，我找不到任何有用的東西，因為它們看起來過於復雜，沒有任何無意義的額外內容或者沒有任何解釋，這無助於我進一步學習。

我編寫了這段代碼來處理Ajax中的圖像上傳：

$(function() {
    $('.input_photo').on("change",function() {                              
        var formData = new FormData($('form.upload-form'));

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            success: function (msg) {
                alert(msg)
            }
        });
    });
});

這會向upload.php文件發送一個請求，但是沒有數據發送，基本上我的表單就是這樣：

<form class="upload-form">
     <input type="file" name="input_photo" class="input_photo" />
</form>

似乎沒有任何數據在頭文件中傳遞，我想我會通過PHP使用$_POST['data']數組或$_FILES來訪問它？ 有更好知識的人請幫助解釋一下，進一步理解這一點會很棒。 謝謝。

Answer 1

這適用於一個或多個文件。

$('input:file').on('change', function () {  

 var data = new FormData();

 //Append files infos
 jQuery.each($(this)[0].files, function(i, file) {
     data.append('file-'+i, file);
 });

 $.ajax({  
     url: "my_path",  
     type: "POST",  
     data: data,  
     cache: false,
     processData: false,  
     contentType: false, 
     context: this,
     success: function (msg) {
          alert(msg);
      }
  });
});

然后

$_FILES['file-0']
$_FILES['file-1']
[...]

但要小心， 在IE10之前使用FormData不能在IE上運行

Answer 2

您需要在ajax調用中設置processData和contentType （還要在input元素中添加id以獲取文件內容）。

HTML

    <form class="upload-form">
         <input type="file" id="photo" name="input_photo" class="input_photo" /> 
    </form>

JS

  $(function() {
        $('.input_photo').on("change",function() {    
            var file = document.getElementById("photo").files[0]; //fetch file
            var formData = new FormData();                     
            formData.append('file', file); //append file to formData object

            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                processData: false, //prevent jQuery from converting your FormData into a string
                contentType: false, //jQuery does not add a Content-Type header for you
                success: function (msg) {
                    alert(msg)
                }
            });
        });
    });

Answer 3

試試這個：

var formData = $('form.upload-form').serialize();