javascript Jquery 文件上传总是失败，文件上传中止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23064666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery File Upload always fails with File Upload Aborted
提问by Styphon
I'm trying to get Blueimp's Jquery File Uploadplugin 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_uploadfunction it gets to:
我正在尝试让Blueimp 的 Jquery 文件上传插件在我的网站上工作，但我一生都无法上传文件。我一整天都在研究这个，但被卡住了。它将上传文件并将其提交给 UploadHandler 类，但是当它尝试完成该handle_file_upload功能时，它会：
file_put_contents(
$file_path,
fopen('php://input', 'r'),
$append_file ? FILE_APPEND : 0
);
but that always returns 0. I cannot figure out why the file won't upload. The full response I get back is:
但这总是返回 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.phponly instantiates UploadHandler, nothing else.
ajax.file-upload.php只实例化 UploadHandler，没有别的。
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.
如果您想查看 UploadHandler 的完整代码，可以从 github 下载它，它太大了，我无法在此处发布。
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.
有人可以告诉我为什么文件不会上传吗？是的，我已经完成了基本操作，例如检查文件夹是否为 CHMOD 777。我已经尝试使用不同类型的各种文件（它们必须是图像才能工作，仅限于 jpg、png 或 gif）和大小；都产生相同的结果。
As requested this is the JS file:
根据要求，这是 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');
});
It's pretty much the default file you get with the plugin with just the ID's changed to match my form.
这几乎是您使用插件获得的默认文件，只是更改了 ID 以匹配我的表单。
Update
更新
After much playing around and testing I have found out that the problem occurs when you change the name of the input from filesto 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...
经过多次尝试和测试后，我发现当您将输入名称更改为其他名称时会出现问题files。为什么我不知道。如果您想让它在页面上的多个输入上运行，这显然是一个问题......
I created a very simple version of the interface myself, and that doesallow 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.
我自己创建了一个非常简单的界面版本，这确实允许我更改文件名，因此它必须与他们使用的示例有关。我希望能够使用预览图像等（我在简单测试中无法弄清楚的东西），所以我需要解决这个问题。
回答by Styphon
This is in case anyone else ever gets stuck on this problem as well. The issue is caused by the paramNameoption, 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选项引起的，如果未设置，则从输入名称中获取它的值。它不是默认设置的，因此在更改输入名称时我也在更改 paramName，这意味着它不再匹配从 UploadHandler 类返回的变量。
The solution is to add paramName: 'files[]'as an option.
解决办法是添加paramName: 'files[]'一个选项。
回答by Dharmadas Mohite
I was facing same issue(action aborted) and have different answer.
我面临着同样的问题（行动中止）并且有不同的答案。
The folder/directory where I was uploading file did not have permission to upload file. on Linux server you can run following command chmod 777 files When I gave permission to this directory, I did not get this error, and could upload file successfully.
我上传文件的文件夹/目录没有上传文件的权限。在 Linux 服务器上，您可以运行以下命令 chmod 777 files 当我授予此目录的权限时，我没有收到此错误，并且可以成功上传文件。
回答by Boris
I am running a centOS 6.9. chmod 0755 /server/php/files (rather than 777) and I changed the ownership (chown) over to apache. Ta-Da!
我正在运行 CentOS 6.9。chmod 0755 /server/php/files（而不是 777），我将所有权（chown）更改为 apache。达达！
