Can't send file with ajax to php file
Question
I am having a problem with receiving File Data.
This is my HTML FORM:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Upload</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="General.js"></script> </head> <body> <form method="post" enctype="multipart/form-data" id="Form" action="upload.php"> <table width="350" border="0" cellpadding="1" cellspacing="1" class="box"> <tr> <td width="246"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> <input name="userfile" type="file" id="userfile"> </td> <td width="80"><input name="submit" type="submit" class="box" id="submit" value=" Upload "></td> </tr> </table> </form>
As you can see it sends us to the file General.js
$(document).ready(function (e){ $("#Form").on('submit',(function(e){ e.preventDefault(); var formData = new FormData(document.getElementById('userfile')); // AJAX Code To Submit Form. $.ajax({ type: "POST", url: "uploader.php", data: formData, cache: false, contentType: false, processData: false, success: function(callback){ alert(callback); } }); return false; }) ); });
and the php page that need to recieve this:
$fileName = $_FILES['userfile']['name'];
$tmpName = $_FILES['userfile']['tmp_name'];
$fileSize = $_FILES['userfile']['size'];
$fileType = $_FILES['userfile']['type'];
Everything works fine, but the problem is when i send the data to the php file, it doesn't receive it as it should. Maybe i need to use some addition things? Because the name of the file and the size and everything is empty.
EDIT:
$(document).ready(function(){ $("#submit").click(function(){ var formData = new FormData($('form')[0]); // AJAX Code To Submit Form. $.ajax({ type: "POST", url: "uploader.php", xhr: function() { // Custom XMLHttpRequest var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // Check if upload property exists myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload } return myXhr; }, data: formData, cache: false, contentType: false, processData: false, success: function(callback){ alert(callback); } }); return false; }); }); function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } }
Also tried this code, but still it doesn't send the right information to the page. I am getting on the uploader.php page an error that says that the name of the file is empty, what means that maybe i don't receive it good or it didn't send at all.
2 answers
solution1
3 ACCPTED 2015-02-22 19:11:48
Try using this...
$(document).ready(function (e) {
$("#Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "uploader.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
console.log(data);
}
});
}));
});
solution2
0 2015-02-22 18:46:10
change
var formData = new FormData(document.getElementById('Form'));
to
var fd = new FormData();
fd.append("userfile", document.getElementById('userfile').value);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.