使用jQuery.ajax发送multipart/formdata

我有一个问题发送文件到服务器端php脚本使用jQuery的ajax函数。这是有可能得到文件列表与$('#fileinput').attr('文件')，但如何可能将此数据发送到服务器?当使用文件输入时，服务器端php-script上的结果数组($_POST)为0 (NULL)。

我知道这是可能的(尽管到目前为止我还没有找到任何jQuery解决方案，只有prototyye代码(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);
    }
});

当前回答

jquery-> $("#id")[0]表单对象 data = new FormData($(#id)[0]); 好的，数据是你想要的

2013-07-18 09:54:58

其他回答

看看我的代码，它为我做了这项工作

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

2014-08-30 06:49:40

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"));

就像拉斐尔的密码一样

2013-02-22 00:24:13

我只是根据我读到的一些信息构建了这个函数。

像使用.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);

2012-09-14 14:33:12

旧版本的IE不支持FormData (FormData的完整浏览器支持列表在这里:https://developer.mozilla.org/en-US/docs/Web/API/FormData)。

你可以使用jquery插件(对于ex, http://malsup.com/jquery/form/#code-samples)，或者，你可以使用基于IFrame的解决方案通过ajax发布多部分表单数据:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

2018-02-08 10:42:19

上面所有的解决方案看起来都很好，很优雅，但是FormData()对象不需要任何参数，而是在实例化它后使用append()，就像上面写的那样:

formData.append (val.name val.value);

2018-03-08 13:47:10

使用jQuery.ajax发送multipart/formdata

推荐文章

最新文章

标签