Question

我找到了这些代码段http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-input，我想看看它们是如何工作的，但代码在我的情况下不起作用。也许我的整合有问题？请分享一些集成片段，因为我是JS的新手：）

这是我可能错误的整合......

<html>

  <head>
<script language="javascript" type="text/javascript">

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}


  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>

<body>
<div>
<input type="file" id="files" name="files[]" multiple />
  <output id="list"></output>
</div>
<body>


</html>

P.S＆GT;我的互联网浏览器：FF 5.0

赞赏所有有用的评论：）

Answer 1

首先，您的示例有几个直接问题，您的关闭<body>实际上是另一个开放<body>！那，不会引起你的问题。

第二个错误是行，

document.getElementById('files').addEventListener('change', handleFileSelect, false);

这不能在开放中 out，可以这么说，因为在窗口加载完成之前，id=files的元素不存在，所以你需要包装在函数中调用并在窗口加载时调用它（或者更好，在document.ready中使用jQuery或类似函数）。像这样，

window.onload = function() { document.getElementById('files').addEventListener('change', handleFileSelect, false); };

不幸的是，在这两个之后我仍然收到错误，f.lastModifiedDate未定义。隐含lastModifiedDate不是File对象的属性。这是你链接的片段中的错误还是其他我不确定的错误。我想知道。

<强>更新

确定。好吧，你说你想知道这是否是Firefox的问题，所以我去了Chrome测试，它工作正常。我的结论是，lastModifiedDate对象的File属性未在Firefox（5）中实现，但在Chrome中。（这可以通过迭代File对象的可用属性来确认。）

这不能解释为什么尝试在您发布的链接中的示例在Firefox中工作，但复制和粘贴示例不会。这可能是唯一的原因是代码段中的代码与页面上实际使用的代码并不完全相同。必须检查fileModifiedDate属性是否确实存在。果然，看看有问题的页面的来源你会看到，而不是这个，

f.lastModifiedDate.toLocaleDateString(),

似乎他们正在使用这个，

f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

因此，更换该行应解决问题。 Here's a jsfiddle with it working（至少在Chrome和Firefox 5中）。

Answer 2

首先，你不能执行这行代码：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

来自HEAD标记中的代码。该文档尚未加载，因此'files'对象不存在，因此代码行最多总是会失败。

您必须等待文档在执行前完成加载。如果您没有使用任何库（如jQuery或YUI），那么您可以连接到页面的onload方法并从中运行代码。

Answer 3

所以，我已将代码修改为

<html>

    <head>

<script>

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size,
          ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',  
          '</li>');
    }

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

window.onload = function() {

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};
</script>

    </head>

    <body>
        <div>
            <input type="file" id="files" name="files[]" multiple />

            <output id="list"></output>
        </div>
    </body>
</html>

它在我的FF 5.0中有效：）

@tjm，非常感谢您提供非常好的代码示例

JS HTML 5 - 无法集成示例代码 - 帮助

3 个答案: