jQuery-File-Upload - 一种形式的多个输入文件

Question

插件“blueimp/jQuery-File-Upload”让我抓狂。 在表单中，我有 2 个文件输入：一个用于图像，另一个用于文档。

<form id="file-upload">

<!--File 1 : Image -->
<input id="file-img" name="file1" type="file">
<input id="txt-file-img" type="text" class="form-control" style="background:white;" readonly>

<!--File 2 : Document -->
<input id="file-doc" name="file2" type="file">
<input id="txt-file-doc" type="text" class="form-control" style="background:white;" readonly>

</form>

我想根据用于选择文件的输入应用不同的测试（大小和类型）。 我在文档中找不到如何管理这种简单的情况。

$('#file-upload').fileupload({
    dataType: 'json',
    autoUpload: false,
    add: function (e, data) {
        var uploadErrors = [];
        var acceptImgTypes = /^image\/(gif|jpe?g|png)$/i;
        var acceptDocTypes = /^application\/(pdf|msword)$|^text\/plain$/i;

        /**TEST HERE**/
        /** How to make the distinction between data coming from file-img and data coming from file-doc ? ***/
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
        /** Same problem here I need to make the distinction  in order to update the right input[type=text]***/
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
                $("#txt-file-doc").val(file.name);
            });

            $("#btn_add_valid").on('click',function () { 
                $("#loading_modal").modal("show");  
                data.submit();
             });
        }
    },
    done: function (e, data) {
        $("#loading_modal").modal("hide");
        $("#output").html('<p class="sucess">OK!</p>');
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#upload-progress .bar').css(
            'width',
            progress + '%'
        ).text(
            progress + '%'
        );
    },
    fail: function (e, data) {
        $("#output").html('<p class="error">FAIL!</p>');
    }
});

你知道如何使用这个插件管理多个输入[type=file]？

非常感谢您的帮助

Answer 1

我找到了输入参数“name”的解决方案：

如果您的输入有 2 个不同的名称（例如：file1 和 file2），您可以通过以下测试知道所选文件的来源：

if (data.paramName=="file1")
{
    .....
}else{
    ....
}

所以我对类型和大小做了如下测试：

var uploadErrors = [];
var acceptImgTypes = /^image\/(gif|jpe?g|png)$/i;
var acceptDocTypes = /^application\/(pdf|msword|vnd.openxmlformats-officedocument.wordprocessingml.document)$|^text\/plain$/i;


if (data.paramName=="file1")
{
    if (data.originalFiles[0]['type'] && !acceptImgTypes.test(data.originalFiles[0]['type'])) 
    {
        uploadErrors.push('Not an accepted file type');
    }
    if (data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > 4000000) 
    {
        uploadErrors.push('File size is too big');
    }
}
else
{
    if (data.originalFiles[0]['type'] && !acceptDocTypes.test(data.originalFiles[0]['type'])) 
    {
        uploadErrors.push('Not an accepted file type');
    }
    if (data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > 10000000) 
    {
        uploadErrors.push('File size is too big');
    }
}

与 inputTxt 相同（带有文件名）

if (data.paramName=="file1")
{
    $("#txt-file-img").val(data.files[0].name);
}
else
{
    $("#txt-file-doc").val(data.files[0].name);
}

测试很好，但现在上传过程中出现错误：

"error":"File upload aborted"
"deleteType":"DELETE"

你明白为什么吗？

非常感谢

Answer 2

我不明白为什么它不能与 data.paramName 一起使用，但我找到了另一种解决方案来了解选择文件的哪个输入：

data.fileInput[0].id

所以最终的解决方案是这样的：

if (data.fileInput[0].id=="file-img")
{
    ...
}
else
{
    ....
}

我已经删除了我的文件输入的所有名称参数并且它有效！