PHP AJAX 使用 FormData 上传图片

Question

我对 jQuery 和 Ajax 函数比较陌生，但过去几天一直在使用 Ajax 表单。但是，在尝试上传图片时，我遇到了文件上传问题。在寻找资源时，我找不到任何有用的东西，因为它们似乎 over-complicated 没有任何意义的额外内容或没有任何解释，这对我进一步学习没有帮助。

我写了这段代码来处理 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>

似乎没有数据在 headers 中传递，我假设我会通过 PHP 使用 $_POST['data'] 数组或 $_FILES 访问它？请有更好知识的人帮助解释这一点，如果进一步了解这一点会很棒。谢谢。

Answer 1

试试这个：

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

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

这适用于一个或多个文件。

$('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']
[...]

但是要注意using FormData doesn't work on IE before IE10

PHP AJAX 使用 FormData 上传图片

PHP AJAX Image Uploading with FormData

php

ajax

jquery

file-upload