We help IT Professionals succeed at work.
Get Started

AJAX File Upload Form

dban00b
dban00b asked
on
417 Views
Last Modified: 2012-06-21
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

Comment
Watch Question
PHP Programmer
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE