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

我找到了这些代码片段http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-选择文件输入，我想看看它们是如何工作的，但代码在我的情况下不起作用。也许我在它的集成方面做错了什么？请分享一些集成片段，因为我对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>

第页。S> 我的互联网浏览器：FF 5.0

感谢所有有用的评论：(

您的示例有几个直接的问题首先，您关闭的<body>实际上是另一个打开的<body>！不过，这不会给你带来问题。

第二个错误是线路

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

可以说，这不可能在打开的中出现，因为在窗口完成加载之前，具有id=files的元素是不存在的，所以您需要将其封装在一个函数中，并在窗口加载时调用它(如果您使用jQuery或类似功能，则在document.ready中更好(。像这样，

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

不幸的是，在这两者之后，我仍然得到一个错误，f.lastModifiedDate是未定义的。隐含lastModifiedDate不是File对象的属性。我不确定这是你链接的片段中的错误还是其他原因。我正在努力寻找答案。

更新

好的。正如你所说，你想知道这是否是Firefox的问题，所以我去Chrome测试了一下，结果很好。我的结论是，File对象的lastModifiedDate属性不是在Firefox(5(中实现的，而是在Chrome中实现的。(这可以通过迭代File对象的可用属性来确认(。

这并不能解释为什么在你发布的链接中尝试这个例子在Firefox中有效，但复制和粘贴这个例子却无效。唯一可能的原因是代码片段中的代码与页面上实际使用的代码不完全相同。必须对fileModifiedDate属性是否真的存在进行一些检查。果不其然，看看有问题的页面的来源，你会发现

f.lastModifiedDate.toLocaleDateString(),

看来他们在用这个，

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

因此，更换这条线路应该可以解决问题。这里有一个jsfiddle，它可以工作(至少在Chrome和Firefox 5中(。

首先，您不能执行以下代码行：

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

来自HEAD标记中的代码。文档尚未加载，因此"files"对象不存在，因此代码行最多只能失败。

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

所以，我已经将代码修改为

<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，非常感谢您提供的非常好的代码示例

相关内容

最新更新

热门标签：