我有一个问题发送文件到服务器端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);
    }
});

当前回答

Devin Venable的回答接近于我想要的,但我想要一个可以在多个表单上工作的答案,并使用表单中已经指定的操作,以便每个文件都能到达正确的位置。

我还想使用jQuery的on()方法,这样我就可以避免使用.ready()。

这让我想到了这个: (用jQuery选择器替换formSelector)

$(document).on('submit', formSelecter, function( e ) {
        e.preventDefault();
    $.ajax( {
        url: $(this).attr('action'),
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false
    }).done(function( data ) {
        //do stuff with the data you got back.
    });

});

其他回答

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

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

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

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

如果文件输入名称指示一个数组并标记多个,并且使用FormData解析整个表单,则没有必要迭代地追加()输入文件。FormData将自动处理多个文件。

$('#submit_1').on('click', function() { let data = new FormData($("#my_form")[0]); $.ajax({ url: '/path/to/php_file', type: 'POST', data: data, processData: false, contentType: false, success: function(r) { console.log('success', r); }, error: function(r) { console.log('error', r); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="my_form"> <input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" /> <button type="button" name="submit_1" id="submit_1">Not type='submit'</button> </form>

注意,这里使用的是常规按钮type="button",而不是type="submit"。这表明不依赖于使用submit来获得此功能。

结果$_FILES条目在Chrome开发工具中是这样的:

multi_img_file:
  error: (2) [0, 0]
  name: (2) ["pic1.jpg", "pic2.jpg"]
  size: (2) [1978036, 2446180]
  tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
  type: (2) ["image/jpeg", "image/jpeg"]

注意:在某些情况下,某些图像在作为单个文件上传时可以正常上传,但在以一组多个文件上传时就会失败。其症状是PHP报告空$_POST和$_FILES,而AJAX没有抛出任何错误。问题发生在Chrome 75.0.3770.100和PHP 7.0。在我的测试集中,几十张图片中似乎只有一张出现这种情况。

Devin Venable的回答接近于我想要的,但我想要一个可以在多个表单上工作的答案,并使用表单中已经指定的操作,以便每个文件都能到达正确的位置。

我还想使用jQuery的on()方法,这样我就可以避免使用.ready()。

这让我想到了这个: (用jQuery选择器替换formSelector)

$(document).on('submit', formSelecter, function( e ) {
        e.preventDefault();
    $.ajax( {
        url: $(this).attr('action'),
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false
    }).done(function( data ) {
        //do stuff with the data you got back.
    });

});

现在你甚至不需要jQuery:)获取API支持表

let result = fetch('url', {method: 'POST', body: new FormData(document.querySelector("#form"))})