Javascript 使用AJAX上传Gmail风格的文件

我正试图开发一个网页，张贴在表单上的附加文件和其他字段。总之，我的页面应具有以下功能：

用户可以查看他们要上传的文件（无需实际上传）

必要时删除

仅当用户单击时上载到服务器

我在互联网上进行了研究，发现了这篇关于文件API的有用文章，我设法使它工作起来。所有选定的文件都将上载到服务器。但我想改进一下

我不想立即上传到服务器上。我希望用户在提交和上传之前查看，仅当他们单击“立即上载所有文件”时

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

在本例中，所有文件都来自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
            }
        });

---

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

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

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

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

---

使用change（）而不是click（），并以

evt.target.files

的形式访问文件它会消耗浏览器内存吗？如果有5 MB x 10个文件，是否需要50 MB？不，到目前为止，它只是一个文件引用，您可以使用FileRead将其加载到内存中。