我有一个问题发送文件到服务器端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);
}
});
如果文件输入名称指示一个数组并标记多个，并且使用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。在我的测试集中，几十张图片中似乎只有一张出现这种情况。
我只是根据我读到的一些信息构建了这个函数。
像使用.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);
