Question

我从html5rocks中获取了一段代码，用于加载您拖放到页面的文件，我正在修改它以便将文件读入字符串，然后我将其与，并输出到页面。这一点是有效的，但我还需要能够在创建它的函数之外拾取字符串，但我不能。

我认为这可能是范围问题，也可能是某种回调问题。无论如何这里是代码：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    var output = [];
    var OutString = []; // < --my variable that I want to use

    for (var i = 0, f; f = files[i]; i++) {
        if (f.name.match('\.csv')) { // if 1
            var Filename = decodeURI(escape(f.name));
            var reader = new FileReader();
            reader.onload = (function (theFile) { 
                return function (e) {        
                    var contents = e.target.result;
                    var FileLines = contents.split("\n");
                    var LineCount = FileLines.length;
                    OutString = '<table id="mytab" border = "1" width = "90%"><tr>';
                    var ColCount = 1;
                    for (var i = 0; i < LineCount; ++i) {
                        OutString = // I format a table here..
                    }
                    OutString += '</tr></table>';

                    var span = document.createElement('span');
                    span.innerHTML = [OutString].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            reader.readAsText(f);
            // if format up a word document using xml here 
            testFunc = // I want to read the contents of OutString here

            // this creates the button that opens the finished document 
            var OutPutLine = "<a href='data:application/msword;charset=UTF-8, " + encodeURIComponent(TestFunc) + "' ><input id='Button1' type='button' value='Open printable sheet1' /></a>";
            output.push(OutPutLine);

        } else {
            // this triggers if its not a csv file that drag n drops
            output.push('<strong>', escape(f.name), ' is not a comma seperated (.csv) file!!!!</strong>');
        }
    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

我不介意我是否将字符串形式变量变量，或者从文档中取出它（它是一张表），但目前我也做不到。

Answer 1

您的变量OutString在handleFileSelect内声明（它前面有var - 关键字），这意味着它只能用于该函数（或者在函数内部声明的函数）那个功能）。

要解决此问题，您可以在OutString之外声明handleFileSelect，以便在该功能之外进行访问。

或者，您可以通过引用您分配给它的<table>来获取id - 元素：

document.getElementById('mytab')

您还为FileReaders onload - 事件设置了回调。这是通过自我调用function来完成的，以防止范围问题。自调用的function返回一个新function，onload用作OutString - 事件的回调。由于这是一个事件，它只会在该事件触发时被调用，这可能是在您访问handleFileSelect之前或之后（handleFileSelect之外）。你可以像这样添加一个回调到function handleFileSelect(evt, callback) { //Removed some code to shorten the example for (var i = 0, f; f = files[i]; i++) { if (f.name.match('\.csv')) { // if 1 var Filename = decodeURI(escape(f.name)); var reader = new FileReader(); reader.onload = (function (theFile, onloadCallback) { return function (e) { //Removed some code to shorten the example document.getElementById('list').insertBefore(span, null); if( onloadCallback && typeof onloadCallback === 'function' ) onloadCallback(); }; })(f, callback); //Removed some code to shorten the example } else { //Removed some code to shorten the example } //Removed some code to shorten the example }：

{{1}}

全局变量没有在功能内获得变化

1 个答案: