WebUploader单页多实例实现

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

---

1,需求-单页多实例:

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

---

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

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

---

3,多个WebUploader实例

1)引入

<script type="text/javascript" src="../lib/webuploader.min.js"></script>

2)Html-Table部分代码:

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

<table id="resultsTable" class="tabContent">    <tbody>        <tr class="row" th:each="company, companyStatus : ${companyQualificationsList}">            <td class="col-3 text-center">                <div th:text="${company.companyDesc}">企业描述</div>            </td>            <td class="col-4 text-center">                <div class="uploder-container" style="height: 47px;">                    <a th:id="@{(${company.companyCode})}" th:class="@{('filePicker pull-left')}">&nbsp;&nbsp;浏&nbsp;览&nbsp;&nbsp;  </a>                    <div class="uploadDiv" style="height: 100%;line-height:37px">                        <div>                            请选择企业资质文件                        </div>                    </div>                </div>                <div class="clearfix" th:if="${not #lists.isEmpty(company.companyQualificationsList)}" th:each="qualification : ${company.companyQualificationsList}">                    <div style="text-align:left" th:id="${qualification.qualificationsCode}">                        <span th:text="${qualification.qualificationsDesc}"></span>                        <a th:href="${qualification.qualificationsUrl}">下载</a>                        <a th:onclick="'javascript:deleteFile(\''+${company.companyCode}+'\',\''+${qualification.qualificationsCode}+'\')'">删除</a>                    </div>                </div>            </td>            <td class="col-5 text-center">                <button th:id="${companyStatus.index}" type="button" class="uploaderDone btn btn-h-sm btn-w-sm btn-blue">上传</button>            </td>        </tr>    </tbody></table>

3)JS实现WebUploader多实例

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

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('<div >' + file.name + '</div>');        });        //上传成功（注意：后台返回值这里可以获取到)        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();        });    });});

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

在此只是提供一个思路,相信通过以上代码修修补补改改,应该可以实现了吧

---

变更记录

20170109:
排版微调