我有一个问题发送文件到服务器端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类确实可以工作，但在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"));
就像拉斐尔的密码一样
如果文件输入名称指示一个数组并标记多个，并且使用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。在我的测试集中，几十张图片中似乎只有一张出现这种情况。
如果表单是在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){
...
