Can you send a request to upload a file with ajax?

dsaba · January 19, 2008

I've searched, and haven't found any success in finding a good example of requesting to upload a file and then uploading it with ajax, while the php side just processes the upload, the ajax is responsible for calling it and sending it. All I HAVE found are examples that label themselves "ajax uploads" but all they really mean by this is seeing the result of the file upload without reloading page, and the user still has to press the submit button on the form, they use tricks like iframe..etc..

I was wondering if sending the POST to upload a file can be completely done behind the scenes, I've heard it can't be done...

Here is my attempt:

<html>
  <head>
  <title>...</title>
  <META name="description" content="run code">
  <script type="text/javascript">
function GetXmlHttpObject() {
var xmlHttp=false;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
function uploadFile(f) {
//make ajaxObj
ajaxObj=GetXmlHttpObject();

if (ajaxObj) {
	//make queryString for GET
	var postStr = "f=" + encodeURIComponent(f) + "&MAX_FILE_SIZE=" + encodeURIComponent("1000000000");
	alert(postStr);
	var url = "run_code.php";

	//request results via ajax
	ajaxObj.open("POST",url,true);
	ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajaxObj.setRequestHeader("Content-length", postStr.length);
	ajaxObj.setRequestHeader("Connection", "close");
	ajaxObj.send(postStr);

	//output results
	ajaxObj.onreadystatechange = stateChanged;
} else {
	alert("Your browser does not support ajax!");
}
}
function stateChanged() {
if (ajaxObj.readyState == 4) {
	var d = new Date();
	var timeStr = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
	var resultStr = ajaxObj.responseText;
	document.getElementById("timeDiv").innerHTML = "|Time requested: " + timeStr;
	document.getElementById("resultDiv").innerHTML = resultStr;
	//document.formExamp.matches.value = resultStr;
}
}
</script>
</head>
<body>

<?php
if (count($_POST) > 0) {


echo '<pre>';
echo "Files:\r\n";
print_r($_FILES);

echo "Post: \r\n";
print_r($_POST);
echo '</pre>';



#upload file
$uFile = dirname($_SERVER['SCRIPT_FILENAME']).'/'.basename($_FILES['f']['name']);
if (move_uploaded_file($_FILES['f']['tmp_name'], $uFile) && !$_FILES['f']['error']) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Error uploading!\n";
}
} else {
//display form
if (count($_GET) > 0) {
	print_r($_GET);
}

echo '
<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" name="upFileForm" method="POST">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000000" />
    <!-- Name of input element determines name in $_FILES array -->
    Send this file: <input name="f" type="file" onChange="uploadFile(document.upFileForm.f.value);" />
    <input type="submit" value="Send File" />
<br><br><br>
<div name="timeDiv"></div><br><br>
<div name="resultDiv"></div>
</form>';
}
?>
</body>
</html>

All it does is alert the postString, that's it.

jos. · January 19, 2008

You are right. I cannot be done. Just like you cannot post form data to a remote host with ajax either.

Jos.

Sign In

Can you send a request to upload a file with ajax?

Recommended Posts

dsaba

Link to comment

Share on other sites

jos.

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information