Ajax File Upload

[ecluley]

Hey, having a bit of trouble with a file upload that im building. I know that my upload script (ASP) works as I have used it. My problem is getting it to run correcly from ajax.I have a form with a button and a file input and a text box (for some sort of response)my ajax function is called when the button is clicked and the button passes the file object to the ajax function.I have put in several "alert()"s to see where my code is at and whether it is working and all come up as if the code runs completely.The problem is, i get back "<h1>Length Required</h1>" rather than the output from the asp file.so my code is thus, toUpload being the file passed from the form.

function ajaxFunction(toUpload){var xmlhttp;if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else if (window.ActiveXObject)  {  // code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }else  {  alert("Your browser does not support XMLHTTP!");  }xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4)  {  document.myForm.time.value=xmlhttp.responseText; //this should print the response from the uploadimage.asp into the time box  }}alert("sending")xmlhttp.open("POST","uploadimage.asp",true);xmlhttp.send(null);}

and my form looks like this

<form name="myForm" ENCTYPE="multipart/form-data">Name: <input type="file" name="toUpload" />Time: <input type="text" name="time" /><input type="button" onclick="ajaxFunction(toUpload);"/></form>

and my asp is, just to test,

<%response.write("works")%>

the thing i get back is "<h1>Length Required</h1>" and i cannot work out what im doing wrong.also, have tried adding

xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xmlhttp.setRequestHeader("Content-length", parameters.length);xmlhttp.setRequestHeader("Connection", "close");

just before the xmlhttp.send(null); in the ajax function.I am pulling my hair out over this but really don't understand it. Hope someone can shed some light on this.Thanks

[justsomeguy]

You can't use AJAX to upload a file, you'll need to submit the form regularly using a hidden iframe or something. If you have a hidden iframe and put a target on the form then it will submit in the iframe and the page won't reload (similar to AJAX). It will be a regular post submission though. The problem with submitting a file through AJAX is that Javascript does not have access to the file on your computer to read and send to the server, the browser has to do that.

<iframe style="display: none;" id="upload_frame"></iframe><form target="upload_frame" ...

The difficult part is getting the response back from the server. You'll need some Javascript code to either detect when the frame reloads, and capture the content of it to process, or something similar. The XHR object with the onreadystatechange property isn't used for uploading files.

[ecluley]

ok, i see, so i can't send a file to an asp script using ajax?i think i found a tutorial for doing it with so ill take a look at that.thanks for your help, u always seam to be around to assist me with my silly questions.Cheers,Ewen

[justsomeguy]

ok, i see, so i can't send a file to an asp script using ajax?

Not with ajax. I've been using a Javascript library called ExtJS for most of my development lately, and when I set up an ajax form there and tell it to use file upload, instead of normal ajax it creates a new iframe and submits there, I can see the request show up in a different place from the regular ajax stuff in my debugging tools.