使用jQuery.ajax发送multipart / formdata

我在使用jQuery的ajax函数将文件发送到服务器端PHP脚本时遇到问题。可以使用$('#fileinput').attr('files')获取文件列表，但如何将这些数据发送到服务器呢？使用文件输入时，服务器端php脚本上的结果数组（ $_POST ）为0（ NULL ）。

我知道这是有可能的（尽管直到现在我还没有找到任何jQuery解决方案，只有Prototye代码（ http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ）））。

这似乎是相对较新的，所以请不要提及通过XHR / Ajax无法上传文件，因为它确实可以正常工作。

我需要Safari 5，FF和Chrome中的功能会不错，但不是必需的。

我现在的代码是：

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

#1楼

我只是根据阅读的一些信息构建了此功能。

像使用.serialize()一样使用它，而只需放入.serializefiles(); 。
在我的测试中工作。

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

#2楼

FormData类确实起作用，但是在iOS Safari（至少在iPhone上）中，我无法按原样使用Raphael Schweikert的解决方案。

Mozilla Dev 在处理FormData对象方面有一个不错的页面。

因此，在页面的某处添加一个空表单，指定enctype：

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

然后，将FormData对象创建为：

var data = new FormData($("#fileinfo"));

并按照Raphael的代码进行。

#3楼

通过jquery-> $（“＃id”）[0]获取表单对象
数据=新的FormData（$（“＃id”）[0]）;
好的，数据就是你想要的

#4楼

如果您的表单是在HTML中定义的，则将表单传递给构造函数要比迭代和添加图像容易。

$('#my-form').submit( function(e) {
    e.preventDefault();

    var data = new FormData(this); // <-- 'this' is your form element

    $.ajax({
            url: '/my_URL/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',     
            success: function(data){
            ...

#5楼

看我的代码，它对我有用

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3156194

标签

XHR

safari

jquery