dsaba Posted January 19, 2008 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/86757-can-you-send-a-request-to-upload-a-file-with-ajax/ Share on other sites More sharing options...
jos. Posted January 19, 2008 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/86757-can-you-send-a-request-to-upload-a-file-with-ajax/#findComment-443463 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.