Question

客户端Javascript场景：在单个窗口中选择要上载的多个文件。将所选文件存储在：

var SelectedFile={};

使用元素名称作为键。我正在使用以下方法将元素推入对象：

SelectedFile[event.srcElement.name]=event.target.files[0];

在函数调用中。 SelectedFile的变量范围是函数的全局。

在此函数内部，SelectedFile的所有元素都显示为＆＃34; File＆＃34;对象。

当我从另一个函数访问SelectedFile时，元素现在是＃34; ArrayBuffer＆＃34;我丢失了文件实例中的所有键和子对象。

如何确保＆＃34; SelectedFile＆＃34;的元素？保持为＆＃34;文件＆＃34;任何时候的对象？

"use strict";
window.addEventListener("load", Ready);

var SelectedFile={};

function Ready() {
        if(window.File && window.FileReader) {
                document.getElementById('UploadButton').addEventListener('click', StartUpload);

                $(".upreel").each(function(idx,obj) {
                        obj.addEventListener('change', function(event) {
                                console.log(event.target.files[0]);
                                SelectedFile[event.srcElement.name]=event.target.files[0];                                    console.log(SelectedFile[event.srcElement.name]);
                                console.log(SelectedFile);
                        });
                });

        } else {
                document.getElementById('UploadArea').innerHTML="Your Browser Doesn't Support The File API. Please Upade Your Browser";
        }
}


var socket=io.connect('http://localhost:3000');
var FReader;
var Name;

function StartUpload() {
        $(".upreel").each(function (index) {
                console.log(index);
        });
        console.log(SelectedFile);
        for (var a in SelectedFile) {
                console.log(SelectedFile[a]);
        };
        socket.emit('StartMultiple',{SelectedFiles:SelectedFile});
}

Answer 1

似乎也无法复制此处的行为。在Windows 7下使用Chrome 53.0.2785.143 m（64位）。

此代码似乎与您的代码重复，尽管没有使用jQuery。

另外，我注意到虽然控制台输出似乎表明SelectedFile是一个包含2个ArrayBuffer成员的对象，但console.log(SelectedFile[a]);的输出没有备份 - 我不太确定我会倾向于认为控制台输出是正确的。如果您仍然可以按预期使用这些对象，那么我会在自己的观察中寻找信任控制台的理由。

我看到的输出与console.log(SelectedFile);的输出除外，它给出了[reelfile1: File, reelfile2: File]的输出，如下所示。

所需的代码如下。具有讽刺意味的是，当作为stack-snippet运行时，输出也是不正确的，但是在使用本机控制台时很好，而不是StackOverflow提供的模拟。出于这个原因，我不会将其发布为您可以在此页面上运行的代码段，而只是另存为新文件。

<!doctype html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id)}
function allByClass(clss,parent){return (parent==undefined?document:parent).getElementsByClassName(clss)}

// useful for HtmlCollection, NodeList, String types (array-like types)
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
let SelectedFile = [];

function onDocLoaded(evt)
{
    byId('uploadButton').addEventListener('click', onUploadBtnClicked);

    var fileInputs = allByClass('upreel');
    forEach(fileInputs, attachFileInputListener);

    function attachFileInputListener(fileInputElem, index)
    {
        fileInputElem.addEventListener('change', onFileInputChanged, false);
    }
}

function onFileInputChanged(evt)
{
    console.log(this.files[0]);
    SelectedFile[this.name] = this.files[0];
    console.log(SelectedFile);
}

function onUploadBtnClicked(evt)
{
    var fileInputs = allByClass('upreel');
    forEach(fileInputs, showIndex);
    console.log(SelectedFile);
    for (var a in SelectedFile)
    {
        console.log(SelectedFile[a]);
        console.log(SelectedFile[a].name);
    }
    function showIndex(elem, index, array)
    {
        console.log(index);
    }
}
</script>
<style>
</style>
</head>
<body>
    <input type='file' class='upreel' name='reelfile1'/><br>
    <input type='file' class='upreel' name='reelfile2'/><br>
    <hr>
    <div id='UploadArea'></div>
    <hr>
    <button id='uploadButton'>Upload</button>
</body>
</html>

TLDR; - 除了控制台中的显示外，这里似乎没有任何问题。

Javascript对象从typed元素更改为arraybuffer

1 个答案: