我有一段代码是我从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);
我不介意我是从变量中获取字符串，还是从文档（它是表）中获取字符串，但是目前我不能执行任何操作。
您的变量OutString在内部声明handleFileSelect（var在其前面带有-keyword），这意味着该变量仅可用于该函数（或在该函数内部声明的函数）。
要对其进行修复，可以声明您的OutStringoutside handleFileSelect，使其可用于函数外部访问。
或者，您可以<table>通过引用id分配给它的-element来获得-element ：
document.getElementById('mytab')
您还为FileReaders onload-event设置了回调。这是通过自调用function来完成的，以防止出现范围问题。function自调用返回一个新值，并将其function用作onload-event的回调。由于这是一个事件，因此只会在该事件触发时（可能在您访问之前或之后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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句