Jquery-fileupload 插件 - 上传文件但说“文件上传失败”
Posted
技术标签:
【中文标题】Jquery-fileupload 插件 - 上传文件但说“文件上传失败”【英文标题】:Jquery-fileupload plugin - uploads file but says 'file upload failed' 【发布时间】:2014-02-03 16:26:34 【问题描述】:我单击“添加文件”选择一个文件,然后创建一个缩略图(取决于浏览器)并在其下方显示“上传”按钮。
当我点击“上传”时,有时它会上传文件并显示“文件上传失败”。 - 文件实际上已上传,但我仍然收到此消息。有时它不上传,我收到相同的消息。
我有两个错误 -
第一个是在php error log 'PHP Warning: exif_imagetype(): Filename cannot be empty in ***\***\UploadHandler.php'
,不过我不是一直都明白。
第二个是页面上的 jquery.validation - 'Uncaught Error: Syntax error, unrecognized expression: [name=files[]]'
在调试器中,它直接跳转到 '.on('fileuploadfail', function (e, data)' 而不去其他任何地方,一旦完成它会刷新整个页面。我猜我需要在某个地方“return false”?
感谢您的帮助。
html:
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
var filepower = function ()
'use strict';
var url = 'server/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();
);
);
$('#fileupload').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('#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);
$('#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');
;
【问题讨论】:
在您的问题中避免使用较大的文字。>! 我知道这很多,但我想不出还有什么办法来解释它。 当服务器响应包含 HTTP 错误状态时触发 fileuploadfail 事件。所以服务器已经收到你的请求,上传就可以完成了。你使用服务器端框架吗? 我也有同样的问题。你解决了吗@ch3my 我在 Rails 中也面临同样的问题....反正有办法解决这个问题.. 帮助我 frds 【参考方案1】:您没有发布源代码,但如果您可以添加到服务器上的响应,那么您可以通过在此处实现返回结构来修复它: https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
如果您无法更改服务器,我无法帮助您,尽管库作者说有一种方法可以修改/覆盖预期的 JSON 字段,因此它不会出错。
【讨论】:
【参考方案2】:要么从服务器返回适当的预期响应,要么获取 data.jqXHR 。这将包含来自服务器的响应。您可以使用它来检查上传是否成功。
【讨论】:
以上是关于Jquery-fileupload 插件 - 上传文件但说“文件上传失败”的主要内容,如果未能解决你的问题,请参考以下文章
使用webuploader插件上传图片时如果正确 限制上传数量
富文本框插件KindEditor 上传图片不走后台直接js上传文件到oss要怎么处理?