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

劳拉杰夫

插件“ 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]吗?

非常感谢您的帮助

劳拉杰夫

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

data.fileInput[0].id

因此,最终的解决方案如下所示:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

没有文件的jQuery-File-Upload

来自分类Dev

jQuery File Upload预览图

来自分类Dev

jQuery-File-Upload重命名文件,然后上传

来自分类Dev

Blueimp的jQuery-File-Upload Second文件上传问题

来自分类Dev

首次文件未在blueimp中上传jQuery File Upload

来自分类Dev

动态创建文件输入时,jQuery File Upload不起作用

来自分类Dev

jQuery File Upload不触发上传

来自分类Dev

jQuery File Upload链接到按钮

来自分类Dev

jQuery File Upload显示剩余时间?

来自分类Dev

jQuery-File-Upload完成回调

来自分类Dev

Blueimp Jquery File Upload-在不同文件夹中上传文件

来自分类Dev

jQuery-将输入值从一种形式复制到另一种形式(形式和输入名称相同)

来自分类Dev

jQuery File Upload-一步一步上传

来自分类Dev

blueimp jquery-file-upload如何在上传前取消1个文件

来自分类Dev

使用Spring Framework和jquery-upload-file插件问题上传文件

来自分类Dev

jQuery File Upload不会在IE9中发送文件

来自分类Dev

jQuery File Upload-带有特殊字符的blueimp文件名

来自分类Dev

jQuery File Upload Plugin:是否可以保留上传文件夹的结构?

来自分类Dev

页面重新加载后重新填充jQuery File Upload文件列表

来自分类Dev

jQuery File Upload-验证文件大小和扩展名

来自分类Dev

jQuery File Upload-带有特殊字符的blueimp文件名

来自分类Dev

jQuery File Upload Plugin:是否可以保留上传文件夹的结构?

来自分类Dev

无法调整图像大小以与jQuery File Upload一起使用

来自分类Dev

jQuery-File-Upload-TypeError:$(...)。fileupload不是一个函数

来自分类Dev

无法调整图像大小以与jQuery File Upload一起使用

来自分类Dev

更改脚本“ jQuery-File-Upload”的显示顺序

来自分类Dev

jQuery-File-Upload插件-501(未实现)

来自分类Dev

使用jQuery File Upload上传后如何获取图像尺寸?

Related 相关文章

  1. 1

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

  2. 2

    没有文件的jQuery-File-Upload

  3. 3

    jQuery File Upload预览图

  4. 4

    jQuery-File-Upload重命名文件,然后上传

  5. 5

    Blueimp的jQuery-File-Upload Second文件上传问题

  6. 6

    首次文件未在blueimp中上传jQuery File Upload

  7. 7

    动态创建文件输入时,jQuery File Upload不起作用

  8. 8

    jQuery File Upload不触发上传

  9. 9

    jQuery File Upload链接到按钮

  10. 10

    jQuery File Upload显示剩余时间?

  11. 11

    jQuery-File-Upload完成回调

  12. 12

    Blueimp Jquery File Upload-在不同文件夹中上传文件

  13. 13

    jQuery-将输入值从一种形式复制到另一种形式(形式和输入名称相同)

  14. 14

    jQuery File Upload-一步一步上传

  15. 15

    blueimp jquery-file-upload如何在上传前取消1个文件

  16. 16

    使用Spring Framework和jquery-upload-file插件问题上传文件

  17. 17

    jQuery File Upload不会在IE9中发送文件

  18. 18

    jQuery File Upload-带有特殊字符的blueimp文件名

  19. 19

    jQuery File Upload Plugin:是否可以保留上传文件夹的结构?

  20. 20

    页面重新加载后重新填充jQuery File Upload文件列表

  21. 21

    jQuery File Upload-验证文件大小和扩展名

  22. 22

    jQuery File Upload-带有特殊字符的blueimp文件名

  23. 23

    jQuery File Upload Plugin:是否可以保留上传文件夹的结构?

  24. 24

    无法调整图像大小以与jQuery File Upload一起使用

  25. 25

    jQuery-File-Upload-TypeError:$(...)。fileupload不是一个函数

  26. 26

    无法调整图像大小以与jQuery File Upload一起使用

  27. 27

    更改脚本“ jQuery-File-Upload”的显示顺序

  28. 28

    jQuery-File-Upload插件-501(未实现)

  29. 29

    使用jQuery File Upload上传后如何获取图像尺寸?

热门标签

归档