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')}">  浏 览    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('
' + 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();
        });

    });
});

不足之处:

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

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

---

变更记录

20170109:
排版微调