Question

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

我是网络编程的新手，无法理解如何从本教程中“完整代码”的两个部分创建代码，基本上是：

一个。一些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部分放在我的代码中。

[编辑]

感谢您的补充答案！

Answer 1

将javascript放在上传表单后的<script></script>标记内。

您链接的帖子有一个完整的工作演示，其中描述了可以在此处找到的代码： http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

尝试使用此类代码段的好方法是将所需的部分粘贴到JSFiddle

等工具中

Answer 2

Javascript位于onClick，onMouseOver等属性以及<script type="text/javascript">标记内。

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

w3 Schools有一个Javascript引用可以帮助您入门。

Answer 3

创建一个扩展名为.js的文件，这样你的文件就是你的文件。
将您的java脚本代码放入其中......
在HTML文件的末尾将其放在：

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

确保您的js与您的html ...

Answer 4

在</body>标记之前，在<script type="text/javascript"></script>标记之间，如下所示：

<body>

    <!-- other stuff -->

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

</body>

或者在<head></head>标记内，也在<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：

file 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>

Answer 5

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

这是javascript，我应该放在哪里

5 个答案: