1

我找到了这些代码片段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>

PS> 我的网络浏览器：FF 5.0

感谢所有有用的评论:)

4

3 回答 3

3

首先，您的示例存在几个直接问题，您的 close<body>实际上是另一个 open <body>！那，不会引起你的问题。

第二个错误，是行，

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

这不能公开，可以这么说，因为在窗口完成加载之前，元素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',

所以更换那条线应该可以解决问题。这是一个可以正常工作的jsfiddle（至少在Chrome和Firefox 5中）。

于 2011-07-04T01:58:28.537 回答
1

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

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

来自 HEAD 标签中的代码。该文档尚未加载，因此“文件”对象不存在，因此该行代码充其量总是会失败。

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

于 2011-07-04T02:01:41.183 回答
0

所以，我将代码修改为

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

于 2011-07-04T16:13:38.797 回答