dban00b
asked on
AJAX File Upload Form
my below javascript code was working fine for submitting forms until I tried to add a file input to the form.
the php file, response_test.php, is saying that the $_FILES array is empty
It must having something to do with how I'm stitching together a parameter string:
params=params+'description ='+documen t.form.des c.value+'& file='+doc ument.form .file.valu e+'&user=' +document. form.user. value;
response_test.php sees $_POST['description'], $_POST['user'] but does not see $_FILES['file']
How do I fix what I'm sending to the php page so that it can see the file I'm trying to upload through the form?
the php file, response_test.php, is saying that the $_FILES array is empty
It must having something to do with how I'm stitching together a parameter string:
params=params+'description
response_test.php sees $_POST['description'], $_POST['user'] but does not see $_FILES['file']
How do I fix what I'm sending to the php page so that it can see the file I'm trying to upload through the form?
-----The HTML Form-------------------------------------------------------
<form enctype="multipart/form-data" action="javascript:submitform();" name="form" id="form" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="31457280" />
Enter a file Description <input name="description" type="text" id="description" /><br />
Choose a file to upload: <input name="file" id="file" type="file" /><br />
<input type="hidden" name="user" id="user" value="testuser" />
<input type="submit" value="Upload File" />
</form>
-----The Javascript-------------------------------------------------------
function submitform(){
var params=verifynewincform();
if(params){
//placeholder image
document.getElementById('mydiv').innerHTML='<img src="/images/loading.gif" />';
newRequest(params);
}
else{
document.getElementById('mydiv').innerHTML ='You did not fill in the information correctly';
}
}
function verifynewincform(){
var valid=true;
var params='';
//
//test form fields here
//
if(!valid) {
return false;
}
else {
params=params+'description='+document.form.desc.value+'&file='+document.form.file.value+'&user='+document.form.user.value;
return params;
}
}
function newRequest(parameters) {
myXHR = false;
if (window.XMLHttpRequest) {
myXHR = new XMLHttpRequest();
if (myXHR.overrideMimeType) {
myXHR.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) {
try {
myXHR = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
myXHR = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!myXHR ) {
document.getElementById('mydiv').innerHTML='Cannot create XHR ';
return false;
}
myXHR.onreadystatechange = newResponse;
myXHR.open('POST', 'response_test.php', true);
myXHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myXHR.setRequestHeader("Content-length", parameters.length);
myXHR.setRequestHeader("Connection", "close");
myXHR.send(parameters);
}
function newResponse() {
if (myXHR.readyState == 4) {
if (myXHR .status == 200) {
result = myXHR .responseText;
document.getElementById('mydiv').innerHTML = result;
} else {
document.getElementById('mydiv').innerHTML ='myXHR error:'+myXHR .status;
}
}
}
see here an ajax upload example: http://www.captain.at/ajax -file-uplo ad.php
ASKER
unfortunately, it needs to work in IE.
I'm looking at this page right now:
http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
I'm looking at this page right now:
http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Indeed, doing it with an iframe worked equally well in Firefox & IE without needing special configuration.