webuploader上传控件

webuploader开源魔改

开源地址:https://github.com/luoyunchong/staticfiles/blob/master/libs/abp.webuploader.js

参考

• 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 一开始就是从此代码改写的，增加了UI样式和图片上传预览效果，秒传等功能。

文件上传

示例，使用方式，用户下载 staticfiles项目后，使用vscode打开项目，安装live server插件，可将前端项目运行起来，进入tests/webuploader-file.html 页面 ，可展示出具体效果。依赖于后端，暂未整理。

          $(function () {
            //实例化文件上传，webuploader的属性都可以使用
            $("#uploadfile").powerWebUpload({
                // fileNumLimit: 2,
                // auto: false
            });
            //编辑时编辑值
            webuploader.loadFile({
                elem: '#uploadfile',
                rows: [{
                    Id: 1,
                    FileName: '-1d2fab5b7544b288.jpg',
                    FileToken: '9a92df63-24fc-4592-968c-efcf70cea290.jpg',
                    FileSize: '2333'
                }]
            });
            //查看页面，只需要调用 这个方法即可，isCheck为true时为查看页面，没有删除按钮
            webuploader.loadFile({
                elem: '#check',
                isCheck:true,
                rows: [{
                    Id: 1,
                    FileName: '-1d2fab5b7544b288.jpg',
                    FileToken: '9a92df63-24fc-4592-968c-efcf70cea290.jpg',
                    FileSize: '2333'
                }]
            });
        });
        //如何获取上传文件的地址  ，多文件上传时，文件名最后以*分割     9a92df63-24fc-4592-968c-efcf70cea290.jpg*9a92df63-24fc-4592-968c-efcf70cea290.jpg  
        function getFiles() {
            var data = $("#uploadfile").GetFilesAddress();
            return data;
        }
    </script>

    <form class="form-horizontal">
        <label for="" class="">附件：</label>
        <div id="uploadfile" style="position: relative"></div>
        <br />
        <label for="" class="">查看页面：</label>
        <div id="check"></div>
    </form>

图片上传

可参考这个页面：https://github.com/luoyunchong/staticfiles/blob/master/tests/webuploader-img.html
即设置属性 uploadType:'img’即可。

遇到的问题

webuploader在同一个页面中有多个实例时，如果将如下代码放到实例中，事件beforeSendFile会执行多次。但如果只实例一次，无法在验证秒传文件后，得到当前上传文件实例

// 大文件分片，断点续传，以及秒传功能
// 在文件开始发送前做些异步操作。做md5验证
// WebUploader会等待此异步操作完成后，开始发送文件。
WebUploader.Uploader.register({
    "before-send-file": "beforeSendFile"
}, {
    beforeSendFile: function (file) {
        var task = new $.Deferred();
        var $fileId = file.id;
        uploader.md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {
            var uploadflieElement = $('#' + fileId);
            if (opts.uploadType === 'file') {
                var value = Math.round(percentage * 100);
                uploadflieElement.find('div.webuploadstate .webupload-text').html('正在上传' + value + '%');
            }
        }).then(function (val) {
            var $fileId = file.id;
            userInfo.md5 = val;
            $.ajax({
                headers: {
                    "Authorization": "Bearer " + webuploader.authorization
                },
                type: "POST",
                url: serviceUrl + '/File/Md5Validate',
                data: {
                    md5: val
                },
                cache: false,
                timeout: 3000,
                dataType: "json"
            }).then(function (response, textStatus, jqXHR) {
                //若存在，这返回失败给WebUploader，(后台操作)表明该文件不需要上传，然后就可以把数据库查询出的文件信息的物理路径给新文件
                if (response.success == true) {
                    //task.reject('秒传成功');  此处会执行uploadError
                    uploader.skipFile(file);
                    //上传成功事件
                    if (opts.uploadType === 'file') {
                        if($('#'+$fileId+' .webuploadstate .file-token').attr('data-filetoken')!=''){
                            return;
                        }
                        var limit = webuploader.bytesToSize(file.size);
                        var downUrl = serviceUrl + '/File/Download?fileToken=' + response.result + '&newName=' + file.name;

                        $('#' + $fileId).find('div.webuploadstate .webupload-text').html(limit + ' 秒传');
                        $('#' + $fileId).find('div.webuploadstate .file-token').attr('data-filetoken', response.result);

                        $('#' + $fileId)
                            .find('div.webuploadinfo .webupload-button a')
                            .after('<a href="' + downUrl + '" target="_blank"><span  class="webupload-download">下载</span></a>');

                    } else {
                        window.setTimeout(function () {
                            $('#' + $fileId + ' img').attr('src', serviceUrl + '/File/Download?fileToken=' + response.result);
                            $('#' + $fileId + ' .webupload-list-img-cover .img-upload-state span.file-token').attr('data-filetoken', response.result);
                        }, 500);
                    }
                }
                task.resolve();
            }, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传
                task.resolve();
            });
        });

        return $.when(task);
    }
});

如果解决此问题呢？

1. 在方法外定义一个对象，存储当前uploader实例，uploaders[userInfo.index]即可访问到当前实例

    var userInfo = {
            md5: '',
            index: ''
        },
        uploaders = {};

2. 在before-send-file事件前执行此方法，即监听beforeFileQueued方法

    
        /*当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。*/
        uploader.on("beforeFileQueued",
            function (file) {
                //
                userInfo.index = pickerid;
                return true;
            });

·