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

我找到了带有输入的参数“名称”的解决方案：

如果输入的名称有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
{
    ....
}

我已经删除了文件输入中的所有名称参数，并且可以使用！