Link to home
Start Free TrialLog in
Avatar of dban00b
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='+document.form.desc.value+'&file='+document.form.file.value+'&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 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;
        }
    }
}

Open in new window

Avatar of Ionut A. Tudor
Ionut A. Tudor
Flag of Romania image

see here an ajax upload example: http://www.captain.at/ajax-file-upload.php
Avatar of dban00b
dban00b

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
ASKER CERTIFIED SOLUTION
Avatar of Ionut A. Tudor
Ionut A. Tudor
Flag of Romania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dban00b

ASKER

Indeed, doing it with an iframe worked equally well in Firefox & IE without needing special configuration.