2

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.

HakoStan
  • 69
  • 2
  • 10
  • It's a duplicated questions..check this out: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously – user3379482 Feb 22 '15 at 19:47
  • I'll check it later, thank you and sorry for this inconvenience. – HakoStan Feb 22 '15 at 19:58
  • I updated the post with an edit, please check it if you can. The problem is that i can't receive a good data. I think it does send the data but how i wrote the code in php to receive it, is bad. so if you can, check it please and tell me what is wrong. Thank you :-) – HakoStan Feb 22 '15 at 20:28

2 Answers2

4

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);
            }
        });
    }));
});
Moid
  • 1,447
  • 1
  • 13
  • 24
  • i changed the code, see in the post. i am now getting an error, maybe i have a syntax problem. Uncaught: TypeError: undefined is not a functionGeneral.js:2 (anonymous function)jquery.min.js:26 c.extend.readyjquery.min.js:32 M – HakoStan Feb 22 '15 at 19:39
  • `var formData = new FormData(document.getElementById('userfile'));` this should have the id of form... `var formData = new FormData(document.getElementById('Form'));`...Or you can also get rid of this statement by `data: new FormData(this)` – Moid Feb 22 '15 at 19:44
  • First of all thank you very much for you help and your time, Second of all, I tried what you said and i still getting an error on line 2, undefined is not a functionGeneral.js:2 (anonymous function)jquery.min.js:26 c.extend.readyjquery.min.js:32 M. – HakoStan Feb 22 '15 at 19:56
  • I have updated the code...I have been using this...so this is tested and works fine...Hopefully...it will work for u too... :) – Moid Feb 22 '15 at 20:01
  • same error on this line: $("#Form").on('submit',(function(e) { Maybe it is because of the source i am using for jquery? – HakoStan Feb 22 '15 at 20:16
  • I didn't noticed your CDN... use a newer `jQuery` version...many of the features were included in 1.5.0 and later..use this... `` – Moid Feb 22 '15 at 20:21
  • well, thank you it is working now. The only problem is that nothing happens.. i have a code that need to use the variables and upload the file. The code is working but it doesn't upload. maybe there is a problem with the php code i presented in the post? can you take a look please? – HakoStan Feb 22 '15 at 20:44
  • try `print_r($_FILES['userfile']);` to check if you are receiving any file data...if yes then you can process the required data anyway you want... – Moid Feb 22 '15 at 20:54
  • Thank you very much for your help and your time, Everything working perfectly!!! :-) – HakoStan Feb 22 '15 at 22:00
0

change

    var formData = new FormData(document.getElementById('Form'));

to

   var fd = new FormData();     
   fd.append("userfile", document.getElementById('userfile').value);
Vishal Wadhawan
  • 1,085
  • 1
  • 9
  • 11