我试图让 Blueimp的jQuery的文件上传插件工作在我的网站，但对我的生活不能得到它来上传文件。我一直在这一整天，我坚持。这将上传的文件，并将其提交给UploadHandler类的，但是当它试图完成 handle_file_upload 功能，它得到：
I'm trying to get Blueimp's Jquery File Upload plugin working on my website, but for the life of me can't get it to upload files. I've been working on this all day and am stuck. It will upload the file and submit it to the UploadHandler class, but when it's trying to complete the handle_file_upload function it gets to:
file_put_contents(
$file_path,
fopen('php://input', 'r'),
$append_file ? FILE_APPEND : 0
);
但总是返回0。我想不通，为什么该文件将不会上传。完整的回应，我得到的回复是：
but that always returns 0. I cannot figure out why the file won't upload. The full response I get back is:
{"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，仅此而已。
ajax.file-upload.php only instantiates UploadHandler, nothing else.
如果你想看到完整的code你UploadHandler你可以从github上下载它，它太大了，我张贴在这里。
If you'd like to see the full code you for UploadHandler you can download it from github, it's too big for me to post on here.
有人能告诉我，为什么这些文件不会上传？是的，我已经做了基本知识，如检查文件夹是文件模式777。我已经试过这与不同类型的各种文件（必须是图像工作，仅限于JPG，PNG或GIF）和尺寸;所有产生相同的结果。
Can someone please tell me why the files won't upload? Yes I've done the basics such as checking the folder is CHMOD 777. I've tried this with various files of different types (they must be images to work, limited to jpg, png or gif) and sizes; all produce the same result.
根据要求，这是JS文件：
As requested this is the JS file:
$(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');
});
这是pretty的多，你得到的插件，只用ID的改变，以匹配自己的状态。
It's pretty much the default file you get with the plugin with just the ID's changed to match my form.
经过一番玩弄和测试我发现，当你从文件改变输入的名称，其他任何出现问题。为什么我不知道。这显然是一个问题，如果你想拥有它运行在一个以上的输入网页...
After much playing around and testing I have found out that the problem occurs when you change the name of the input from files to anything else. Why I have no idea. This is obviously an issue if you want to have it running on more than one input on a page...
我创建的界面非常简单的版本我自己，那确实让我改变了文件名，那么它必须是与他们所使用的例子。我希望能够使用preVIEW图像和这样的（这是我无法弄清楚我简单的测试），所以我需要解决这个问题。
I created a very simple version of the interface myself, and that does allow me to change the file name, so it must be something to do with the example they use. I would like to be able to use preview images and the such (something I couldn't figure out in my simple test) so I need to solve this issue.
推荐答案
这是万一别人永远卡在这个问题上也是如此。该问题是由 paramName配置选项，如果不设置需要它从输入名称值造成的。这不是默认设置，所以改变输入名字，我也改变paramName配置，这意味着它不再与由UploadHandler类回来的变量时。
This is in case anyone else ever gets stuck on this problem as well. The issue is caused by the paramName option, which if not set takes it's value from the input name. It's not set by default, so when changing the input name I was also changing paramName, meaning it no longer matched the variable coming back from the UploadHandler class.
该解决方案是增加 paramName配置：文件[]作为一个选项
The solution is to add paramName: 'files[]' as an option.
相关推荐
最新文章