WebUploader单页多实例实现

WebUploader是前端实现上传文件的一个控件
可以实现分片上传,跟踪进度,拖拽上传,图片的预览与压缩,拖拽,过滤,多选,黏贴等添加文件方式的可拓展UI组件
1,需求-单页多实例:

一个公司List页面,有一个Table,行项目是各个公司数据
每行都有一个上传的按钮,用于上传本公司下的文件
(需求是先选择图片,再通过点击上传按钮完成上传,故WebUploader控件配置为非立即上传)

 

2,粗糙的实现:依靠标志位多行共用一个实例

起初,所有行项目依靠一个标志位实现共用一个WebUploader实例
这样的做法如果在A公司上传后,不点击上传按钮,在B公司上传文件后,再点击A行的上传按钮
就会把B公司的文件上传给A公司

3,多个WebUploader实例
1)引入

2)Html-Table部分代码:

从代码的语法可以看到,这段代码是thymeleaf写的

   

       

           

           

           

       

   

企业描述

浏 览                                                                            请选择企业资质文件                                                                                                                                                 下载                         删除

上传

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

3)JS实现WebUploader多实例

思路:
    使用一个数组(uploaderArr)用于保存每个行项的WebUploader实例
    在页面初始化完成后,JQuery选择器选中所有class=uploder-container的Dom(每个公司的CompanyCode唯一),
    循环创建各自的WebUploader实例,并保存到uploaderArr
    上传按钮的点击事件是共用的,通过CompanyCode调用对应的WebUploader实例

    1
    2
    3
    4
    5

var uploaderArr;

$(function(){

    uploaderArr = new Array();

    $('.uploder-container').each(function(index){

        // 根据index找对象
        var filePickerObj = $(this).find('.filePicker');
        var row = filePickerObj.parent().parent().parent();
        var uploadBtn = row.find('.uploaderDone');
        var uploadDiv = row.find('.uploadDiv');

        // companyCode
        var companyCode = filePickerObj.attr('id');
        console.log("companyCode = " + companyCode);

        // 注册上传控件到uploaderArr : 控件对象,companyCode,
        uploaderArr[index] = WebUploader.create({
            auto: false,
            method:'POST',
            server:url,
            pick: {
                id: filePickerObj,
                multiple:false
            },
            formData:{companyCode: companyCode}
        });

        uploaderArr[index].on('beforeFileQueued',function(file){

            // 类型限制
            //if(",jpg,png,ai,zip,rar,psd,pdf,cdr,psd,tif,".indexOf(","+file.ext+",")<0){
            //    alert("不支持的文件格式");
            //}

            //文件名长度限制
            if(file.name.length > 50){
                alert("文件名超长");
                return false;
            }else{
                return true;
            }

        });

        // 当有文件被添加进队列的时候
        uploaderArr[index].on('fileQueued', function (file) {
            uploadDiv.html("");
            if(file.name.length > 50){
                stringObject.substring(0,stop)
            }
            uploadDiv.append('

' + file.name + '

');
        });

        //上传成功（注意：后台返回值这里可以获取到)
        uploaderArr[index].on('uploadSuccess',function(file,reponse){

            if(reponse.resCode == "0"){
                alert("上传成功");
            }else{
                alert("上传失败 原因: " + reponse.message);
            }

            window.location.reload();
        });

        // 注册全部按钮事件
        uploadBtn.click(function(){
            var btnIndex = $(this).attr('id');
            var uploader = uploaderArr[btnIndex];
            uploader.upload();
        });

    });
});

 

不足之处:

    这里没有做进度条和图片选择后的预览,网上的例子很多就不赘述了

    1
    2
    3

在此只是提供一个思路,相信通过以上代码修修补补改改,应该可以实现了吧
---------------------
作者：BraveWangDev
来源：CSDN
原文：https://blog.csdn.net/ABAP_Brave/article/details/77896693
版权声明：本文为博主原创文章，转载请附上博文链接！

 

项目上遇到一个需求，要实现一个页面有多个上传图片入口，我们使用的是webuploader上传组件；
研究了一下终于弄好了这个功能，主要是动态获取上传按钮id和需要展现缩略图的元素id获取元素；保存供以后需要的时候直接用：

1：首先引入所需要的css和js

2：html代码：

身份证件：

上传图片

用户头像：

上传图片

学历证书：

上传图片

3：js代码：

---------------------
作者：dy_zoe
来源：CSDN
原文：https://blog.csdn.net/qq_28394903/article/details/79539327
版权声明：本文为博主原创文章，转载请附上博文链接！