Javascript：从表单同步上传一些文件答案

【问题标题】：Javascript: Upload some files synchronous from a formJavascript：从表单同步上传一些文件
【发布时间】：2014-10-04 01:04:40
【问题描述】：

我需要从一个表单上传多个文件。我有一个“提交”事件，它处理表单数据，上传文件，然后显示一条消息。我需要这个过程同步以在文件上传时显示消息。

我在表单中有这个 HTML 代码：

<form method="post" action="files/upload_project_file" id="upload_project_file_form" target="upload_project_file_iframe" enctype="multipart/form-data">
       <input type="file" name="uploaded_file[]" class="multi" maxlength="0" accept="" />
       <input type="hidden" name="action" value="upload_project_file">
       <input type="hidden" name="id_project_files" value="" id="id_project_files">
</form>

以及 javascript Submit 事件中的这段 Javascript 代码：

        //processes data
        //...

        //Upload files
        var data = new FormData();     
        jQuery.each($('input[name^="uploaded_file"]')[0].files, function(i, file) {
            data.append('uploaded_file'+i, file);
        });

        data.append('id_project_files', $("#id_project_files").val());

        $.ajax({
            url: 'files/upload_project_file',
            enctype: 'multipart/form-data',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            type: 'POST',
            success: function(data){
                //Clear
                $('.filesToUpload').empty();
            }
        });

        //Then show the message and redirect page
        //...

我只上传一个文件，但不是全部，我不能，我不知道为什么。我见过 Jquery.each 只运行一次。

【问题讨论】：

只上传一个文件，因为只有一个input type="file"元素。

标签： javascript ajax forms file synchronous

【解决方案1】：

不，谢谢“user2698878”，我不想使用 Uploadify。最后我更改了 ajax 代码，它工作得很好。这是新代码：

var formData1 = new FormData($("#upload_project_file_form")[0]);
        $.ajax({
            url: "files/upload_project_file",
            enctype: 'multipart/form-data',
            type: 'POST',
            data: formData1,
            async: false,
            success: function (data) {
                $('.filesToUpload').empty();
            },
            cache: false,
            contentType: false,
            processData: false
        });

【讨论】：