Well, I am trying to implement file upload with Ajax and Php in my local apache server.
strong text
$('.uploadButton').click(function(){
var formData = new FormData($(this).closest('.fileUploadForm'));
$.ajax({
url: 'upload.php', //Server script to process data
type: 'POST',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.onprogress = function(e) {
$('progress').attr({value:e.loaded,max:e.total});
$(".progress-bar span").css('width',e.loaded);
};
}
return myXhr;
},
error: function(xhr,status,error)
{
//$('.progressBarDiv progress').hide();
console.log('Error '+xhr+" "+status+" "+error);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
PHP CODE
<?php
$folder = "upload/";
$path = $folder . basename( $_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $path)) {
echo "The file ". basename( $_FILES['file']['name']). " has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
Error
<b>Notice</b>: Undefined index: file in <b>C:\Users\gopir\Server\Apache24\
\htdocs\front-page\upload.php</b> on line <b>4</b><br /><br />
<b>Notice</b>: Undefined index: file in <b>C:\Users\gopir\Server\Apache24
\htdocs\front-page\upload.php</b> on line <b>6</b><br />
There was an error uploading the file, please try again! success
Line that caused error is:
var formData = new FormData($(this).closest('.fileUploadForm'));
If i change this line to
var formData = new FormData($('form')[0])
program works fine.
I can able to see the form data in the console by setting breakpoints in my js. I don't know how to solve this.
I am changing this to achieve multiple file upload functionality.
Please let me know how do i solve this issue. Thanks
HTML
<form enctype="multipart/form-data" class="fileUploadForm" >
<div class="uploadDiv">
</div>
<div class="progressUploadDiv">
<div class="uploadButton">Upload</div>
</div>
</div>
</form>