使用 AJAX 上传 Gmail 样式文件

Question

我正在尝试开发一个在表单上发布附件和其他字段的网页。综上所述，我的页面应该具备以下特点：

1. 用户可以查看他们要上传的文件（无需进行实际上传）
2. 根据需要删除
3. 只有当用户点击时才上传到服务器

我在 Internet 上进行了研究，发现了这篇关于 File API 的有用文章 File API with HTML5，并且我设法使它工作。所有选定的文件都上传到服务器。但我想稍微改进一下。

我不想立即将它们上传到服务器。我希望用户在提交之前查看并仅在点击“立即上传所有文件”时上传。

问题是当用户单击“立即上传所有文件”按钮时，我不知道如何循环所有选定的文件。我无法重新访问用户已经选择的所有文件。

在示例中，所有文件都来自 evt.dataTransfer.files。但是当我单击按钮时它是未定义的。由于我的代码与示例中的代码几乎完全相同，我将只发布重要的部分。

dropArea.addEventListener("drop", function (evt) {
            traverseFiles(evt.dataTransfer.files);
            this.className = "";
            evt.preventDefault();
            evt.stopPropagation();
        }, false);


        $('#btnUploadAll').click(function (evt) {

            for (x in evt.dataTransfer.files) {

                var file = filesToUpload[x];

                //do the upload script to server.
                //xxxxxxxxxxxxxxxxxxxx
            }
        });

我的问题是，当用户单击“立即上传所有文件”按钮时，我如何才能访问预先选择的文件？

Answer 1

第二个事件是一个点击事件，它只包含关于点击的所有内容，它不会包含关于第一个事件中包含的文件的任何内容。

所以你可能应该做的是：创建一个共享变量，在第一个事件中设置它，并在第二个事件中读取它。如以下代码所示：

var filesInQueue = []; // shared variable
dropArea.addEventListener("drop", function (evt) {
    traverseFiles(evt.dataTransfer.files);
    filesInQueue = filesInQueue.concat(Array.from(evt.dataTransfer.files)); // set to the shared variable
    this.className = "";
    evt.preventDefault();
    evt.stopPropagation();
}, false);


    $('#btnUploadAll').click(function (evt) {

        for (x in filesInQueue) { // read from shared variable

            var file = filesToUpload[x];

            //do the upload script to server.
            //xxxxxxxxxxxxxxxxxxxx
        }
    });