webuploader編輯時回顯文件放入隊列的做法

最近一個項目中用到了webuploader, 一款優秀的文件上傳的插件。

API介紹很詳細。詳情見官網

但是在FAQ中並沒有找到回顯文件列表的解決辦法，又看了看api,找出了解決辦法。

話不多說，上代碼：

dom結構

 html:

  

<div class="add-list-area add-list-area1">
            <label >上傳附件：</label>
            <a href="javascript:void(0);" class="file-upload-picker">
                <span class="btn btn-sure">上傳</span>
            </a>
</div>
<div >
    <!--文件列表在這展示-->
    <ul class="file-upload-list">
     
    </ul>
</div>

 

　js:　

 第一步：定義本地變量接收上傳成功的回調數據

 

var fileList = [];
//獲取文件上傳成功后的展示容器
var $list = $('.file-upload-list');

 

  第二步:實例化 webuploader

var uploader = WebUploader.create({
        // 選完文件后，是否自動上傳。
        auto: true,
        server:'/oss/file/uploadFiles',
        pick:'.file-upload-picker',
        resize:false,
        //允許上傳的數量
        fileNumLimit:4,
        //fileSizeLimit 允許上傳的大小
        fileSizeLimit: 200 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 50 * 1024 * 1024  // 50 M

    })

//------顯示用戶選擇-----------
    uploader.on('fileQueued',function(file){
        var $li = $(
            '<li id="' + file.id + '" class="file-item">' +
            '<span class="file-name">'+file.name+'</span>'+
            '<span class="file-del" ><img src="../../../assets/images/icon-del.png" alt=""></span>'+
            '</li>'
            );
        // $list為容器jQuery實例
        $list.append($li );
    });
    uploader.on('uploadBeforeSend', function (file) {

    });
    //----------文件成功、失敗處理-------------
    //文件上傳失敗會派送uploadError事件，成功則派送uploadSuccess事件。不管成功或者失敗，在文件上傳完后都會觸發uploadComplete事件。
    uploader.on( 'uploadSuccess', function( file,response ) {
        debugger
        // console.info('response',response);
        if(response.success){
            var curfile = response.data[0];
            fileList.push(curfile);
        }
        $( '#'+file.id ).addClass('upload-state-done');
        if(fileList.length==4){
            $(".file-upload-picker").hide();
        }else{
            $(".file-upload-picker").show();
        }
    });

    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        // 避免重復創建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上傳失敗');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });

 

第三步：回顯文件列表

//從接口獲取的數據

 

$.ajax({
    url: '/management/build/getBuildById?id=382920844403539968',
    type: 'GET',
    headers: {"Accept": "application/json"},
    contentType: 'application/json;charset=utf-8',
    success: function (data) {
        if (data.success) {
            var res= data.data;
            fileList = res.buildDocList;
            $.each(fileList, function(index,item){

                    var obj ={};
                    obj.name = item.fileName;
                    obj.size = item.size;
                    obj.lastModifiedDate = item.createTime;
                    obj.id = item.id;
                    obj.ext = item.fileType.substr(1);
                    
                    var file = new WebUploader.File(obj);
                    //此處是關鍵，將文件狀態改為'已上傳完成'
                    file.setStatus('complete')
                    uploader.addFiles(file)

            });
        } else {
            alert(data.msg);
        }
    },
    error: function (data) {
        alert(data.msg);
    }
});

第四步：文件的編輯，例如刪除操作：

$list.on('click','.file-del',function(){
        var fileItem = $(this).parent();
        var id = $(fileItem).attr("id");
        var fileIndex = $(fileItem).index();
        var urlStr = fileList[fileIndex].url;
        $.ajax({
            url: '/oss/file/deleteFileByUrl?url='+urlStr,
            type: 'GET',
            // headers: {"Accept": "application/json"},
            // contentType: 'application/json;charset=utf-8',
            success: function (data) {
                if (data.success) {
                    //uploader實例移除file
                    uploader.removeFile(id, true);
                     //接收數據移除對應的文件
                    fileList.splice(fileIndex,1);
                    $(fileItem).fadeOut(function () {
                        $(fileItem).remove();
                    });
                } else {
                    alert(data.msg);
                }
            },
            error: function (data) {
                alert(data.msg);
            }
        });

 

做完這幾步，文件的回顯編輯就沒有問題了，噠噠~