使用 AJAX 上传 Gmail 样式文件

Question

我正在尝试开发一个网页，其中 post 包含附件和表单上的其他字段。总之，我的页面应该具有以下特点：

用户可以查看他们要上传的文件（无需进行实际上传）
必要时删除
仅当用户点击时上传到服务器

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

我不想立即将它们上传到服务器。我希望用户只有在点击 'Upload all files now'.

时才能在提交和上传之前查看

问题是当用户单击 'Upload all files now' 按钮时，我不知道如何循环所有选定的文件。我无法重新访问用户已选择的所有文件。

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

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

我的问题是，当用户单击 'Upload all files now' 按钮时，我如何才能访问预先选择的文件？

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

使用 AJAX 上传 Gmail 样式文件

Gmail Style File Upload with AJAX

html

javascript

file-upload

fileapi