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

Question

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

我有以下形式的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提交事件中的以下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只运行一次。

Answer 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
        });