Blueimp PHP和jQuery文件上传分块在第一个块之后失败

时间:2014-09-26 15:14:36

标签: php jquery blueimp

我在Blueimp中实现分块功能时遇到了麻烦。 我需要分块功能将大文件上传到我的服务器,但我无法提升post_max_sizeupload_max_filesize。 该文档声明它默认支持,只需要下面的代码来激活它。

$('#fileupload').fileupload({
    maxChunkSize: 10000000 // 10 MB
});

哪个公平并没有错,但是在上传第一个块之后上传失败了。

文档中是否还有其他内容无法成功使用?

我使用的代码与演示版Basic Plus完全相同,但无论如何我都将它包含在下面

的jQuery

/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'example.com' ? '//classes/' : 'classes/',
    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,
    //multipart: false,
    acceptFileTypes: /(\.|\/)(mp4|mpeg4)$/i,
    maxFileSize: 2000000000, // 2 GB
    maxChunkSize: 2000000, // 2 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: 620,
    previewMaxHeight: 349,
    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').show();
    $('#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) {
        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');
});

HTML表单

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input id="fileupload" class="adminFields" type="file" name="files[]" multiple>
</span>

0 个答案:

没有答案