Home/ Questions/Q 8077901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:37:25+00:00

I came accross this html multiple file upload tutorial: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/ I’m new to web

  • 0

I came accross this html multiple file upload tutorial: http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

I’m new to web programming enough to not being able to understand how to make a code from the two sections of the ‘complete code’ in this tutorial, which basically are:

A. Some html code:

<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. And some javascript:

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

    function uploadFile (file) {
[etc]

I recognize the code, but I don’t understand where a part of code beginning with (function () is supposed to go into my code.

So my question is: how should the javascript part be placed in my code.

[Edit]

Thanks for your complementary answers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Either just before the </body> tag, between a <script type="text/javascript"></script> tag like this:

    <body>

    <!-- other stuff -->

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

</body>

    Or within the <head></head> tag, also between a <script type="text/javascript"></script>, but you have (probably) to wait until the DOM correctly loaded. For example, using jQuery:

    <head>

    <!-- other stuff -->

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

</head>

    Or even within an external JavaScript file, where you’ll also have (probably) to wait until the DOM correctly loaded. For example, once again using jQuery:

    file myScripts.js

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

    file myDocument.html

    <head>

    <!-- other stuff -->

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

</head>
    • 0