use html5 multiple attribute to trigger multiple single uploads

Question

Sorry for the confusing title.

I have a form-- form1 that has one file input ( with multiple attribute set so that user can select mutiple files). The form doesn't get submitted.

I have another form -- form2 that has a single file input . no mutiple attribute.

Now via javascript i would like to fetch each files from the fileinput from the previous form and then assign the file to the form2's input field and then do an ajax submit. Once the ajax submit is complete I would like to do the same to 2nd file and then 3rd file and so on.

I don't want to use flash or java applet. I am fully aware that IE doesn't support multiple attribute opera can use invalid min max attribute to do the same.

My basic question would be how to fetch the files from the form1 input field and then assisgn it to form2's field ..

Is there a solution for this ? or is my approach itself incorrect ?

What I want to achieve on UI side ? The file gets uploaded and server does some processing and returns some data. so what I want is user can select 10 files but as soon as 1st file is uploaded the output is received.

Gaurav Shah · Accepted Answer · 2011-07-02 07:30:27Z

First : My idea is wrong. We cannot assign a value via javascript to the input with type = file .

I thought of another idea using the XMLHttpRequest. here is my code :

<form id="new_picture_form" method="post" enctype="multipart/form-data" action="some url" accept-charset="UTF-8">
<input id="original_input" class="file_hidden" type="file" onchange="handleFiles(this.files);" name="picture[image][]" multiple="multiple">
</form>
<form id="fileinfo" method="post" enctype="multipart/form-data" action="some url">
</form>

<script type="text/javascript">
  function handleFiles(files)
  { 

    for (var i = 0; i < files.length; i++) {
   FileUpload(files[i])
  }
  }

  function FileUpload(file) {

var data = new FormData(document.getElementById("fileinfo"));
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;


data.append('some field',"that you want to pass as param ")
data.append('type',"picture")
data.append("picture[image]", file);
  xhr.open("POST", "URL",true);
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {

  eval(xhr.responseText) // basically the result from server contains some script
    }
  }


}


</script>

Collectives™ on Stack Overflow

use html5 multiple attribute to trigger multiple single uploads

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related