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

【问题标题】：JS HTML 5 - Cannot integrate sample code - helpJS HTML 5 - 无法集成示例代码 - 帮助
【发布时间】：2011-07-04 01:09:40
【问题描述】：

我找到了这些代码 sn-ps http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-input，我想看看它们是如何工作的，但在我的情况下代码不起作用。也许我在集成方面做错了什么？请分享一些集成 sn-ps，因为我是 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> 我的互联网浏览器：FF 5.0

感谢所有有用的 cmets :)

【问题讨论】：

在您的情况下什么不起作用？你的情况是什么？您如何尝试将该 sn-p 集成到您的案例中？让我们假设您链接到的 sn-p 有效。因此，我们需要看到的是您尝试使用它的示例。
我可以看到文件输入，我可以选择文件，但我看不到它被添加到下面，如示例所示:(

标签： javascript fileapi

【解决方案1】：

首先，您的示例存在几个直接问题，您关闭的<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 对象的属性。这是否是您链接的 sn-p 中的错误或其他我不确定的错误。我正在努力找出答案。

更新

好的。正如你所说，你想知道这是否是 Firefox 的问题，所以我去 Chrome 中进行了测试，它运行良好。我的结论是，File 对象的lastModifiedDate 属性没有在 Firefox (5) 中实现，而是在 Chrome 中实现。（这可以通过迭代 File 对象的可用属性来确认）。

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

f.lastModifiedDate.toLocaleDateString(),

他们好像在用这个，

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

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

【讨论】：

我用 window.onload = function() { document.getElementById('files').addEventListener('change', handleFileSelect, false); 替换了代码};但它不起作用:(
请显示您正在运行的代码片段，因为我需要知道这可能是 FF 5.0 的全部问题 :(
谢谢，但我还是不明白，因为该示例以不同的方式显示 JS 和 HTML，所以我不确定 JS 代码作为一个完整的 html 代码应该放在哪里？它应该放在头部标签中还是放在哪里？这让我很困惑:(
@user jsfiddle 中的 javascript 就像您将其作为外部文件包含在内一样工作。如果您希望它内联，只需将其复制并粘贴到您的 head 部分的 script 标记之间，就像您在原始示例中所做的那样。希望这会有所帮助。
但是为什么 IE 不能使用 File API？哪个IE版本支持File API？

【解决方案2】：

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

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

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

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

【讨论】：

我尝试替换元素，但没有帮助 :( FF 5.0 支持 File API 吗？

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

【讨论】：