用于文件上载的HTML表单 - 由JavaScript生成

Question

I've been trying to create and submit a form with JavaScript for file upload to my web server. I've read that the input type="file" cannot be autopopulated by JavaScript because of security reasons. That being the case, how can I send a POST command to upload my file?

I realise the code snippet below won't work becase of this fact but how can I do it?

What I'm hoping to do in the end is call this function for a number of file that the user will drag and drop so they'll be in an array. I don't have PHP on my webserver (it will only hand simple HTTP commands).

 function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/Temp/TestFile.txt";
     element1.name = "upload1";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

After reading the first link provided by Tom, this is what I came up with:

   function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/JScript/TestText.txt"
     element1.id    = "fileselect";
     element1.name  = "fileselect[]";
     element1.multiple = "multiple";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

..but I don't understand the use of fileselect[].. That I would understand to be an array but how do I populate an array and then assign it back to the HTML element? Say for example I only have one file to post back which is /JScript/TestText.txt .. how do I assign fileselect[0]="/JScript/TestText.txt"; and then feed it back into 'element' for submission?

Answer 1

Correct you can't populate the value of a file input. If you could, you could access any file on a user's computer, which would be a huge security issue.

Also, you won't be able to upload the file to the server at all without server-side scripting of some kind to validate the file and store it to the correct location. If it was possible to do that with just apache, a visitor to your site could upload whatever they wanted to your server, including viruses.

If you do manage to get server side uploads working (I would test with a static html form with a standard file input field first), then in order for you to accept a file via drag and drop and push that file to the server you'll need the html5 file api. Plenty of tutorials like this one .

If you want something robust that will work easily cross platform, have a look at something like PlUpload which achieves everything you want, from the client side at least.