jQuery文件上传-一个表单中有多个输入文件

jQuery-File-Upload - Multiple input file in one form

本文关键字：文件 表单 输入 一个 jQuery      更新时间：2023-09-26

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

<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]吗？

非常感谢您的帮助

我找到了一个具有输入参数"name"的解决方案：

如果您的输入有两个不同的名称（例如：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"

你明白为什么吗？

非常感谢

我不明白为什么它不适用于data.paramName，但我找到了另一个解决方案来知道文件是在哪个输入上选择的：

data.fileInput[0].id

所以最终的解决方案看起来是：

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

我已经删除了我的文件输入的所有名称参数，它工作！

相关文章：