我正在尝试在HTML5的File API的帮助下实现HTML5 ajax文件上传。它基于Afzaal Ahmad Zeeshan对this问题的回答。
我的主要目标是让用户上传.xls
和.xlsx
电子表格以供日后使用。
HTML
<form class="form-uploadXLS" method="post" action="php/uploadXLS.php" enctype="multipart/form-data">
<div class="form-group">
<div class="col-md-12">
<input type="file" name="xls" class="xls" />
</div>
</div>
<input type="button" value="Upload" class="btn-uploadXLS" />
</form>
<progress></progress>
以下是jQuery事件处理程序,就像上面提到的答案一样:
文件输入onChange
事件:
$('.xls').on('change', function () {
var file = this.files[0];
var fileName = file.name;
var fileType = file.type;
var fileSize = file.size;
console.log("file name: " + fileName + ", type: " + fileType + ", size: " + fileSize);
});
这正常,文件的名称,类型和大小会记录到服务器。
上传按钮的onClick
事件:
$('.btn-uploadXLS').on('click', function (event) {
event.preventDefault();
console.log("Upload button clicked");
var formData = new FormData($('.form-uploadXLS')[0]);
$.ajax({
url: 'php/uploadXLS.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.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: function (stuff) {
console.log("BeforeSend");
console.log(stuff);
},
success: function (data) {
console.log("Success!");
console.log(data);
},
error: function (error) {
console.log("Error!");
console.log(error);
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
在服务器端,我正在使用此PHP代码来检查文件是否已发送到服务器
if(!empty($_FILES['xls'])) {
echo '<pre>',print_r($_FILES,1),'</pre>';
}
else {
die('no $_FILES variable');
}
这是print_r的结果:
Array
(
[xls] => Array
(
[name] =>
[type] =>
[tmp_name] =>
[error] => 4
[size] => 0
)
)
根据the documentation,错误代码4
表示:UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded.
我做错了什么?
修改
如果我禁用click事件侦听器并正常提交表单,则文件上传时没有问题。
我注意到formData
变量没有任何值。这是formData
设置后的值FormData { append=append()}
答案 0 :(得分:0)
由于某种原因,问题出在formData变量上,之前定义如下:
var formData = new FormData($('.form-uploadXLS')[0]);
我已经将索引更改为1 ..
var formData = new FormData($('.form-uploadXLS')[1]);
..由于某种原因,它现在有效。
答案 1 :(得分:-1)
而不是:
if(!empty($_FILES['xls'])) {
试试这个:
if(!empty($_FILES['xls']['name'])) {
type = $_FILES['xls']['type'])
tmp = $_FILES['xls']['tmp_name'])