[英]ajax jquery file upload not working
I am using jQuery ajax to upload files. 我正在使用jQuery ajax上传文件。 When I clicked upload button,it fails and the error section of ajax is showing
Uncaught TypeError: Cannot read property 'length' of undefined
. 当我单击上载按钮时,它失败并且ajax的错误部分显示
Uncaught TypeError: Cannot read property 'length' of undefined
。 I have checked the code and found that alerting the jqXHR shows success in the first ajax call,but the ajax call in submitForm() is not working
.The controller stops before the $.each(event,data)
and it shows the above error in the console.Please help me. 我检查了代码,发现
alerting the jqXHR shows success in the first ajax call,but the ajax call in submitForm() is not working
。控制器在$.each(event,data)
之前停止并且它显示上述错误在控制台中。请帮助我。
My code is below: 我的代码如下:
$(document).ready(function()
{
//for checking whether the file queue contain files or not
var files;
// Add events
$('input[type=file]').on('change', prepareUpload);
// Grab the files
function prepareUpload(event)
{
files = event.target.files;
alert(files);
}
$("#file-form").on('submit',uploadFiles);
function uploadFiles(event)
{
event.stopPropagation();
event.preventDefault();
// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
data.append(key, value);
//alert(key+' '+ value);
});
$.ajax({
url: 'module/portal/filesharing/upload.php?files',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
submitForm(event, data);
}
else
{
console.log('ERRORS: ' + data.error);
}
}
});
function submitForm(event, data)
{
// Create a jQuery object
$form = $(event.target);
// Serialize the form data
var formData = $form.serialize();//controller stops here
// sterilise the file names
$.each(data.files, function(key, value)
{
formData = formData + '&filenames[]=' + value;
});
$.ajax({
url: 'update.php',
type: 'POST',
data: formData,
cache: false,
dataType: 'json',
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
console.log('SUCCESS: ' + data.success);
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
},
complete: function()
{
// STOP LOADING SPINNER
}
});
}
}
});
</script>
Html: HTML:
<form id='file-form' action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="filename" ><br>
<input type="submit" id='upload' value="Upload file">
</form>
My update.php: 我的update.php:
$data = array();
if(isset($_GET['files']))
{
$error = false;
$files = array();
$uploaddir = 'module/portal/filesharing/upload/';
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
{
$files[] = $uploaddir .$file['name'];
}
else
{
$error = true;
}
}
$data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
$data = array('success' => 'Form was submitted', 'formData' => $_POST);
}
echo json_encode($data);
If you want it works on cross-browser, i recommend you use iframe like this http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html 如果您希望它可以在跨浏览器上运行,我建议您使用http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html这样的iframe
Or there is some jquery modules using flash for upload they are also good option for older version of internet explorer 或有一些使用Flash上传的jquery模块,它们也是旧版Internet Explorer的不错选择
Maybe your problem is this one, please check this out how to get the uploaded image path in php and ajax? 也许您的问题是这个,请检查一下如何在php和ajax中获取上传的图像路径?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.