jQuery 多文件从头上传

Question

我正在尝试使用新的 HTML5 multiple 属性在 jQuery 中实现多图像上传器。

我的代码如下：

<form action="file-upload.php" method="post" enctype="multipart/form-data">
    <input name="userfiles" type="file" multiple="multiple">
</form>

我使用的 JS 代码取自关于 SO 的讨论，如下：

 $('input[name=userfiles]').change(function() {
    var names = [];
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
        console.log(names[i]);
    }
 });

有了这个，我可以在控制台上打印我选择的文件名，但是如果我需要获取这些文件的确切 val() 怎么办？我尝试将 .name 替换为 .val()，但出现错误。

如果我希望能够使用 $.ajax 来处理每个文件，我认为我需要每个文件的 fakepath。如果这是正确的，我如何在发送 get 请求的 PHP 文件中循环它们以上传它们？

Answer 1

如果你使用 jquery-file-upload 插件，你可以使用这个

<input class="fileupload" type="file" name="file">

和

$('.fileupload').each(function () {
  $(this).fileupload({
  //your code goes here
})

Answer 2

您不需要操作文件路径，在您的 ajax 调用中只需使用 File 并将其放入新的 FormData 中

类似的东西：

 $.ajax({
'type':'POST',
'data': (new FormData()).append('file', $(this).get(0).files[i])

见HTML5 multiple file upload: upload one by one through AJAX

Answer 3

您可以使用 HTML5 FormData API。 https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

var form = new FormData();
for (var i = 0; i < $(this).get(0).files.length; ++i) {
    form.append('userfiles[]', $(this).get(0).files[i]);
}

// send form data with ajax
$.ajax({
    url: 'url',
    type: "POST",
    data: form
});

或者，如果您不能使用 FormData，则有一种方法可以本地发送它： https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files