0

この html 複数ファイルのアップロード チュートリアルに出くわしました: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-複数ファイル/

私は Web プログラミングが初めてなので、このチュートリアルの「完全なコード」の 2 つのセクションからコードを作成する方法を理解できません。基本的には次のとおりです。

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>または<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>

または、DOM が正しくロードされるまで (おそらく) 待機する必要がある外部 JavaScript ファイル内でも可能です。たとえば、もう一度 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 に答える