So let's say i have one input like this:

<input id="test" multiple="true" type="file" name="image_name[]" />

And now after i selected some fils i would like to "transfer" them to simple inputs something like this

var offset = 0;
$.each($("#test")[0].files, function(i, file){
   $("#my_form").prepend(
  '<input type="file" name="image" value="'+$("#test")[0].item(offset).name+'" />'
   )
   offset++;
});

and then ofcourse i would submit them, now i know this code is very wrong, but i'm not so good with javascript so it's just my guessing :)

So let's say i have one input like this:

<input id="test" multiple="true" type="file" name="image_name[]" />

And now after i selected some fils i would like to "transfer" them to simple inputs something like this

var offset = 0;
$.each($("#test")[0].files, function(i, file){
   $("#my_form").prepend(
  '<input type="file" name="image" value="'+$("#test")[0].item(offset).name+'" />'
   )
   offset++;
});

and then ofcourse i would submit them, now i know this code is very wrong, but i'm not so good with javascript so it's just my guessing :)

• javascript
• jquery
• html

• 1 what is it that you are trying to do with the files? store them to a directory? enter them into a database? – Dan Kanze Commented Feb 11, 2012 at 0:39
• @DanKanze Kanze store to folder but i don't think that matters in this case – Linas Commented Feb 11, 2012 at 0:42
• I wouldn't suggest uploading files with javascript. You will have no way of validating user inputs, and really, it's something a serverside scripting language like PHP is meant to do. I would say research how you can do this WITHOUT javascript because you will get farther then trying with. – Dan Kanze Commented Feb 11, 2012 at 0:46
• @DanKanze You can validate user inputs, even better than with server-side scripting alone. Not submitting invalid data to the server saves a round-trip, so there is certainly a use-case. Which is why these new object types have been introduced into the DOM API of several browsers and are part of the HTML5 draft. BTW, there is no "javascript". – PointedEars Commented Feb 11, 2012 at 0:52
• So I've got to ask, what's the purpose of splitting the files into individual inputs? – Jasper Commented Feb 11, 2012 at 1:09

3 Answers 3

For security reasons you cannot generate input[type="file"] elements with a predefined value. And all jQuery gobbledygook will not help to make it happen because, contrary to mon misconception, jQuery is built on the DOM API; jQuery is a wrapper around the DOM API (an awfully inefficient and error-prone one at that) and does not replace it.

If one could do what you are trying to do, any Web site you visit could silently submit any file from your puter, provided that the cracker knew the file path or just guessed right. You do not want the browser vendors to let that happen.

It's not possible to set the path/value in an <input type="file"> that must be done by the user somehow (click the box, drag+drop).

It's a security feature that prevents scripts on a webpage from interacting with a users' harddrive.

You can see what files have been selected, however you cannot set the file to be uploaded, that would be a serious security risk:

$('input[type="file"]').on('change', function () {
    var output = [];
    for (var i = 0, len = this.files.length; i < len; i++) {
        output[output.length] =  this.files[i].name;
    }
    //output now stores an array of names of the files
});

Here is a demo: http://jsfiddle/7LuZM/

I have only tested this in Chrome 17. I know that multiple=true is pretty new so you're probably going to have big cross-browser issues (it's in the HTML5 spec): https://developer.mozilla/en/DOM/Input.multiple

I found this post quite helpful: http://davidwalsh.name/multiple-file-upload

Update

Here is the structure I found for the files property of the input[type="file"] element:

FileList

    0: File
        fileName: "Airstream.zip"
        fileSize: 22891
        lastModifiedDate: Fri Dec 16 2011 14:36:31 GMT-0800 (Pacific Standard Time)
        name: "Airstream.zip"
        size: 22891
        type: "application/x-zip-pressed"
        webkitRelativePath: ""
        __proto__: File

    1: File
        fileName: "Animated-CSS3-Button-5.25.11.zip"
        fileSize: 7764
        lastModifiedDate: Fri Jan 06 2012 13:15:13 GMT-0800 (Pacific Standard Time)
        name: "Animated-CSS3-Button-5.25.11.zip"
        size: 7764
        type: "application/x-zip-pressed"
        webkitRelativePath: ""
        __proto__: File

    2: File
        fileName: "apache-ant-1.8.2-bin.zip"
        fileSize: 10920710
        lastModifiedDate: Fri May 13 2011 11:35:03 GMT-0700 (Pacific Daylight Time)
        name: "apache-ant-1.8.2-bin.zip"
        size: 10920710
        type: "application/x-zip-pressed"
        webkitRelativePath: ""
        __proto__: File

    length: 3
    __proto__: FileList