Question

使用Jquery文件上传。它正在“工作”并上传图像＆amp;显示拇指。但是，当我在处理程序中提交表单时，如果我转储$ _FILES则没有任何内容。

我基本上使用的是Basic Plus示例，其中autoUpload设置为false。我希望我能够使用它来让用户选择多个图像。然后在提交表单后上传它们并处理它们基本上与处理它们的方式相同，如果我在页面上有X个文件上传按钮。

使用autoUpload = TRUE上传它们也可以。我尝试过，在POST或FILES中也没有看到任何内容。

让两种方法都起作用的评论会很棒。

以下是我的js。

$('#fileupload').fileupload({
    url: url,
    method: 'POST',
    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));
        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');

这是我的HTML

<form action="/submit_form" accept-charset="utf-8" class="form-horizontal review-validate-form" id="review-form" autocomplete="off" enctype="multipart/form-data" method="POST"><div style="display:none">

        <div class="control-group">
            <label class="required control-label" for="first_name">Comments <span class="required">*</span></label>
            <div class="controls">
                <textarea name="comments" cols="40" rows="10" class="span8 required" id="comments" ></textarea>             </div>
        </div>



        <!-- 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>
    <!-- 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>
<br>



        <div class="form-actions" style="">
            <input type="submit" value="Submit Review" name="submitReview" class="btn btn-primary btn-large">
        </div>
        </form>

Answer 1

通过为每个上传的文件附加隐藏的输入来使其工作，以便我可以在提交表单后处理它们并将它们添加到数据库中。

我觉得应该有一些内置的东西来处理这个问题但是现在这个有用了。

添加了一个filesHidden div来保存隐藏的字段。

<div id="files" class="files"></div>

然后更新js，将带有文件名的隐藏输入附加到我的表单处理程序，以便我可以将图像与表单提交链接起来。

}).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                $( "#filesHidden" ).append( '<input type="hidden" name="images[]" value="' + file.name + '">' );
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
    });
        }

下面的完整示例（请参阅下面的评论）。请注意，我的示例还为每个上传的图像添加了标题文本框。

var url = '/js/fileUpload/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,
    method: 'POST',
    dataType: 'json',
    autoUpload: true,
    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');
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        var node = $('<p/>')
        .append('<br /><strong>Description</strong>: <input type="text" name="title[]" value="">');
        node.appendTo(data.context);

        node = $(data.context.children()[index]);
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        alert(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) {
            $( "#filesHidden" ).append( '<input type="hidden" name="images[]" value="' + file.name + '">' );
        } 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');

Answer 2

您需要设置正确的数据类型 dataType：'json'，到多部分表单数据你不能用数据类型json属性

设置$ _FILES变量

Answer 3

我之前遇到过类似的问题，我的解决方案是在php.ini中增加每个文件的后期数据大小数据和最大大小：

post_max_size=15M
upload_max_filesize=15M

Jquery文件上传 - $ _FILES数组为空

3 个答案: