我正在尝试获取 Blueimp's Jquery File Upload插件在我的网站上工作,但我一辈子都无法让它上传文件。我整天都在为此工作,但被困住了。它将上传文件并将其提交给 UploadHandler 类,但是当它尝试完成 handle_file_upload
函数时,它会:
file_put_contents(
$file_path,
fopen('php://input', 'r'),
$append_file ? FILE_APPEND : 0
);
但这总是返回 0。我不明白为什么文件无法上传。我得到的完整回复是:
{"files":[
{"name":"1397489968-32",
"size":0,
"type":"multipart\/form-data; boundary=----WebKitFormBoundaryrmi4L2ouOmB4UTVm",
"error":"File upload aborted",
"deleteUrl":"http:\/\/onceridden.demomycms.co.uk\/eshop\/library\/ajax\/?file=1397489968-32",
"deleteType":"DELETE"}
]}
ajax.file-upload.php
只实例化 UploadHandler,没有别的。
如果您想查看 UploadHandler 的完整代码,可以从 github 下载它,它太大了我无法在此处发布。
谁能告诉我为什么文件无法上传?是的,我已经完成了一些基础工作,比如检查文件夹是 CHMOD 777。我已经尝试过使用不同类型的各种文件(它们必须是图像才能工作,仅限于 jpg、png 或 gif)和大小;都产生相同的结果。
根据要求,这是 JS 文件:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '/eshop/library/ajax/ajax.file-upload.php',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#register-photo').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#register-files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#register-progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index, file) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
这几乎是您使用插件获得的默认文件,只是更改了 ID 以匹配我的表单。
更新
经过大量尝试和测试后,我发现当您将输入名称从 files
更改为其他任何名称时会出现问题。为什么我不知道。如果你想让它在一个页面上的多个输入上运行,这显然是一个问题......
我自己创建了一个非常简单的界面版本,确实允许我更改文件名,所以这一定与他们使用的示例有关。我希望能够使用预览图像等(我在简单测试中无法弄清楚的东西)所以我需要解决这个问题。
最佳答案
这是为了防止其他人也遇到这个问题。该问题是由 paramName
选项引起的,如果未设置该选项,则会从输入名称中获取它的值。它不是默认设置的,所以在更改输入名称时我也更改了 paramName,这意味着它不再匹配从 UploadHandler 类返回的变量。
解决方案是添加 paramName: 'files[]'
作为选项。
关于javascript - Jquery 文件上传总是因文件上传中止而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23064666/