blueimp jQuery-File-Upload 过滤类型和文件大小并发送新参数答案

【问题标题】：blueimp jQuery-File-Upload filtering types and files size and send new parametersblueimp jQuery-File-Upload 过滤类型和文件大小并发送新参数
【发布时间】：2012-09-18 11:42:02
【问题描述】：

我正在使用带有此 JS 代码的 jQuery 插件 jQuery-File-Upload：

  $('#file_upload_single').fileupload({
        dataType: 'json',
        acceptFileTypes: /(\.|\/)(gif|jpe?g|tif|png)$/i,
        maxFileSize: 20000000, // 20MB            
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                var msg = file.name + " upload terminado.";
                $('<p/>').text(msg).appendTo($('#progressLog'));
            });
            $('#progressBar .bar').css('width','0%');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progressBar .bar').css('width',progress + '%');
        }
    });

    $('#file_upload_single').bind('fileuploadsubmit', function (e, data) {
        var inputs = data.context.find(':input');
        if (inputs.filter('[required][value=""]').first().focus().length) {
            alert("Por preencher");
            return false;
        }
        data.formData = inputs.serializeArray();
    });

在 HTML 中：

<form id="file_upload_single" action="UploadServlet" method="POST" enctype="multipart/form-data">
            <input id="file_2" type="file" name="file_2" 
                   style="background: gainsboro;" size="70" />
            <p>
                <label for="file_2_title">Título:</label>
                <input id="file_2_title" name="file_2_title" type="text" required title="Título" size="30"/>
            </p>
            <p>
                <label for="file_2_desc">Descritivo</label>
                <input id="file_2_desc" name="file_2_desc" type="text" required title="Descritivo" size="60"/>
            </p>
        </form>
        <button id="formSubmit_single" class="myButton ui-widget ui-state-default ui-corner-all bt_register" 
                type="button" name="formSubmit_single" value="Upload" title="Máx. 20MB cada, do tipo: gif, jpeg, jpg, tif ou png">Imagem única, com descritivo</button>

如果绑定方法被注释，文件被正确上传，但没有完成任何过滤器：acceptFileTypes 和 maxFileSize。在 servlet 中，"String file_2_title = request.getParameter("file_2_title");"给出 null。

如果没有注释绑定方法（如上），则不会运行！ Firebug 显示：

TypeError: data.context is undefined
var inputs = data.context.find(':input');

bind 方法类似于Submit Form Data。怎么了？

【问题讨论】：

嗯...我用了另一个plugin。

标签： jquery jquery-plugins file-upload filtering

【解决方案1】：

我使用了不同的方法来解决附加表单数据的问题。我在“添加”回调中做到了。

add: function (e, data){
    data.formData = {customInfo: <custom information>};
    data.submit();
},

这很好用。但我也无法让过滤器工作。

【讨论】：