cf-platform/Public/Admin/js/uploader.js

function WmUploader(options) {
    this.randomNum = function(min, max){
        var range = max - min;
        var rand = Math.random();
        var num = min + Math.round(rand * range);
        return num;
    }

    this.accept = options.accept == undefined ? {
        title: '图片',
        extensions: 'png,gif,jpg,jpeg,bmp',
        mimeTypes: 'image/*',
    } : options.accept

    // fileType: img file
    this.fileType = options.fileType == undefined ? 'img' : options.fileType
    this.uploadKey = options.uniqueCode == undefined ? this.randomNum(10000, 99999) : options.uniqueCode
    this.uploadSelector = options.selector
    this.uploadUrl = options.url
    this.uploadWrapper = $(this.uploadSelector).parents('.upload-wrapper').eq(0);
    this.uploadList = this.uploadWrapper.find('.uploader-list');
    this.afterSuccess = options.afterSuccess
    this.afterDelete = options.afterDelete

    var that = this

    this.getFileId = function(file) {
        return file.id + '-' + that.uploadKey
    }

    this.getFileTag = function(file) {
        return $('#' + that.getFileId(file))
    }
    
    this.uploader = WebUploader.create({
        auto: true,
        swf: '/Public/static/webuploader/Uploader.swf',
        server: that.uploadUrl,
        pick: {
            id: that.uploadSelector,
            multiple: false
        },
        accept: that.accept,
        resize: false,
        disableGlobalDnd: true,
        fileNumLimit: 1,
        threads: 5,
        thumb: true,
        compress: false,
        prepareNextFile: true,
        formData: function(){ return $.extend(true, {}, {}); },
        chunked: false,
        duplicate: true
    });

    this.uploader.on('fileQueued', function(file) {
        if (that.fileType == 'img') {
            var html = '';
            html += '<div id="' + that.getFileId(file) + '" class="item" style="margin-right: 10px;">';
            html += '<a href="javascript:;"><img src="" style="width: 100px;height: 100px;cursor: move;"></a>';
            html += '<h4 class="info">' + file.name + '</h4>';
            html += '<p class="state">等待上传...</p>';
            html += '</div>';
    
            that.uploadList.append(html);
            that.uploadList.css('margin-top','10px');
    
            var imgNode = that.uploadList.children(that.getFileTag(file)).find('img');
            that.uploader.makeThumb(file, function (error, src) {
                if (error) {
                    return;
                }
                imgNode.attr('src', src);
            }, 300, 300);
        } else {
            that.uploadList.append(
                '<div id="' + that.getFileId(file) + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>'
            );
        }
    });
    
    this.uploader.on('uploadProgress', function(file, percentage) {
        var $li = that.getFileTag(file),
            $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }
        $li.find('p.state').text('上传中');
        $percent.css('width', percentage * 100 + '%');
        $percent.text((percentage * 100).toFixed(0) + '%');
    });
    
    this.uploader.on('uploadSuccess', function(file, response) {
        var fileTag = that.getFileTag(file)
        fileTag.find('p.state').text('已上传').fadeOut(800);
        fileTag.find('h4.info').append('<a href="javascript:;" class="file-delete table_click" style="float:none;display:inline-block;margin-left:10px;">删除</a>');
        fileTag.find('.file-delete').on('click', function() {
            $('#file_url').val('');
            that.uploader.removeFile(file.id);
            fileTag.remove();
            if (that.afterDelete != undefined) {
                that.afterDelete(file)
            }
            return false;
        });
        if(!response.chunk) {
            var url = response.path + '/' + response.name;
            $('#file_url').val(url);
        }
        if (that.afterSuccess != undefined) {
            that.afterSuccess(file, response)
        }
    });
    
    this.uploader.on('uploadError', function(file) {
        that.getFileTag(file).find('p.state').text('上传出错');
    });
    
    this.uploader.on('uploadComplete', function(file) {
        that.getFileTag(file).find('.progress').fadeOut();
    });
}