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>

javascript

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 插件 - 上传文件但说“文件上传失败”的主要内容,如果未能解决你的问题,请参考以下文章

如何将已通过 JS 上传的图像添加到要从其上传的表单中?

SWFUpload 文件上传插件常用的配置讲解

使用webuploader插件上传图片时如果正确 限制上传数量

富文本框插件KindEditor 上传图片不走后台直接js上传文件到oss要怎么处理?

使用webuploader插件上传图片时如果正确 限制上传数量

jQuery文件上传插件jQuery Upload File 有上传进度条