html5 multiple upload along with ajax -


i trying use multiple upload attribute of html5 upload files. know wouldn't work ie , fall single file upload. found invalid html tag min max allows opera same.

i trying following: browse button capable of selecting multiple files. ajax should send files 1 one. scenario this: user selects 5 files , starts upload . ajax should firstfile send first file, second, , on. server side script file , returns data. 1 file upload completed must render part of result. user selects images , starts uploading results come out each file uploaded (and not after files uploaded).

i tried :

 function handlefiles(files)   { alert(files.length); //properly returns number of files selected     (var = 0; < files.length; i++) {   new fileupload(files[i])   }   }    function fileupload(file) {   var reader = new filereader();    var xhr = new xmlhttprequest();   this.xhr = xhr;    xhr.open("post", "portfolio/add_media");   reader.onload = function(evt) {     xhr.sendasbinary(evt.target.result);   };   reader.readasbinarystring(file); } 

after reading tutorial @ mozilla end missing params.

. can 1 suggest me clean solution this

some more details : when pass single file ( no multiple attribute ) server recieves :

"image"=>[# < actiondispatch::http::uploadedfile:0x10d55be8 @tempfile=#< file:c:/users/gaurav/appdata/local/temp/rackmultipart20110701-1916-2ly4k2-0>, @headers="content-disposition: form-data; name=\"picture[image][]\"; filename=\"desert.jpg\"\r\ncontent-type: image/jpeg\r\n", @content_type="image/jpeg", @original_filename="desert.jpg">]}}

but when use multiple attribute , send using xhr able 1 file param. how rest of params ? esp action dispatch thingy

you sending file data server, without encoding in way. server know how process need encode data (multipart/form-data encoding). easiest way using formdata object: https://developer.mozilla.org/en/using_xmlhttprequest#sending_files_using_a_formdata_object. instead of data.append("customfield", "this data") write data.append("file1", event.target.result).


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -