0

我遇到了这个 html 多文件上传教程：http ://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-多文件/

我对网络编程很陌生，以至于无法理解如何从本教程中“完整代码”的两个部分制作代码，基本上是：

A. 一些 html 代码：

<h3>Choose file(s)</h3>
<p>
    <input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
    <span class="drop-instructions">or drag and drop files here</span>
    <span class="drop-over">Drop files here!</span>
</p>

<ul id="file-list">
    <li class="no-items">(no files uploaded yet)</li>
</ul>

B. 还有一些 javascript：

(function () {
    var filesUpload = document.getElementById("files-upload"),
        dropArea = document.getElementById("drop-area"),
        fileList = document.getElementById("file-list");

    function uploadFile (file) {
[etc]

我认识代码，但我不明白以 (function () 开头的部分代码应该进入我的代码的位置。

所以我的问题是：javascript 部分应该如何放在我的代码中。

[编辑]

感谢您的补充回答！

4

5 回答 5

1

<script></script>只需在上传表单后将javascript 放入标签中即可。

您链接到的帖子有它描述的代码的完整工作演示，可以在这里找到： http ://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

试验这种代码片段的一个好方法是将所需的部分粘贴到像JSFiddle这样的工具中

于 2012-06-12T15:06:39.340 回答
1

Javascript 被放置在onClick,onMouseOver等属性以及<script type="text/javascript">标签内。

它们可以位于<head>or<body>标记内的任何位置（将其放在您正在访问的元素之后，以便它们加载）。

w3 Schools有一个 Javascript 参考可以帮助您入门。

于 2012-06-12T15:07:57.180 回答
1

  • 创建一个扩展名为 .js 的文件，以便为 yourFile.js。

  • 将您的 java 脚本代码放入其中...

  • 在 HTML 文件的末尾放置以下内容：

<script src="yourFile.js"></script>

  • 确保您的 js 与您的 html 位于同一目录中...
于 2012-06-12T15:09:37.220 回答
1

就在标签之前，在这样的</body>标签之间<script type="text/javascript"></script>：

<body>

    <!-- other stuff -->

    <script type="text/javascript">
    (function () {
        // this is your function's core
    })();
    </script>

</body>

或者在<head></head>标签内，也在 a 之间<script type="text/javascript"></script>，但你必须（可能）等到 DOM 正确加载。例如，使用 jQuery：

<head>

    <!-- other stuff -->

    <script type="text/javascript">
    $(function() {
        (function () {
            // this is your function's core
        })();
    });
    </script>

</head>

或者甚至在外部 JavaScript 文件中，您也必须（可能）等待 DOM 正确加载。例如，再次使用 jQuery：

文件myScripts.js

$(function() {
    (function () {
        // this is your function's core
    })();
});

文件myDocument.html

<head>

    <!-- other stuff -->

    <script type="text/javascript" src="/path/to/myScripts.js"></script>

</head>
于 2012-06-12T15:09:58.233 回答
0

由于代码包含getElementById但没有类似window.onload或任何其他延迟策略，因此必须将其放置在您希望它影响的表单之后。为了安全起见，您可以将它放在<script>紧挨着的标签中</body>。

于 2012-06-12T15:10:13.413 回答