PHP AJAX图像上传与FormData [英] PHP AJAX Image Uploading with FormData

问题描述

我对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 =filename =input_photoclass =input_photo/> 
< / form> 
  

没有任何数据似乎在头部传递，我假设我将通过PHP访问它 $ _ POST ['data'] array或 $ _ FILES ？有人有更好的知识，请帮助解释这一点，这将是很好的了解这一点。
Thanks。

解决方案

这可以用于一个或多个文件。 $（$'$ $ $ $ $'$'$ $ $ $'''input：file'）。on（'change'，function（）{

var data = new FormData（）;

//追加文件信息
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，
上下文：this，
success：function（msg）{
alert（msg）;
}
}）;
}）;

然后

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

但要小心，使用 FormData 不能在IE10之前的IE浏览器中使用

I am relatively new to jQuery and Ajax functions, but have been working with Ajax forms over the past few days. I have come to a problem with file uploads however when trying to upload images. Whilst looking for resources, I couldn't find anything useful because they seem to be over-complicated with pointless extras or have no explanation whatsoever, which doesn't help me to learn any further.

I have wrote this code to handle the image upload in 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)
            }
        });
    });
});

This sends a request to the upload.php file, however no data is sent, basically my form is literally this:

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

No data seems to be passed in the headers whatsoever and I assume I would access it through PHP with $_POST['data'] array or $_FILES? Someone with better knowledge please help to explain this, it'd be great to understand this further. Thanks.

解决方案

This will work for one or multiple files.

$('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);
      }
  });
});

Then

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

But be careful that using FormData doesn't work on IE before IE10

这篇关于PHP AJAX图像上传与FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！