jili2/public/static/study/js/mywebuploader.js

jQuery(function() {
    var $this = $('.wu-example');
    $this.each(function(index, element) {
        var $ = jQuery,
            $list = $($(element).find('#thelist')),
            $btn = $($(element).find('#ctlBtn')),
            state = 'pending',
            uploader;
        // alert($btn.prop("outerHTML"));
        if($list.length<=0){
            return;
        }
        // var $totalSize = $list.attr('data-totalSize')|100;
        // var $singleSize = $list.attr('data-singleSize');
        // var $filenumlimit = $list.attr('data-filenumlimit');
        var fileName = $list.attr('data-filename');
        var $data_mimeTypes = $list.attr('data-mimeTypes');
        var $file_auto = $list.attr('data-auto');
        var $filenumlimit = $list.attr('data-filenumlimit');
        var $data_ext = $list.attr('data-ext')==''?'*':$list.attr('data-ext');
        var $type = $list.attr('data-mode');
        var $orgid = $list.attr('data-orgid');
        var auto = false;
        if($file_auto=='true'||$file_auto==true){
            auto = true;
        }
        uploader = WebUploader.create({
            auto:true,
            // fileSizeLimit: $totalSize,//限制上传所有文件大小
            // fileSingleSizeLimit: $singleSize,//限制上传单个文件大小
            // 不压缩image
            resize: false,
            fileNumLimit:$filenumlimit,
            // swf文件路径
            swf: '/public/static/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/Upload/uploadfile',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker'+fileName.replace('[]',''),
            formData:{
                guid: WebUploader.Base.guid(),
                ttype: $type,
                orgId: $orgid
            },
            fileVal:'file',
            chunked: false,
            chunkSize: 1 * 1024*1024,//1M 分1片
            threads: 4,
            accept: {
                extensions: $data_ext,
                mimeTypes: $data_mimeTypes
            }
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {

            $list.append( '<tr id="' + file.id + '">' +
                '<td>' + file.name + '<input type="hidden" name='+fileName+'>'+'</td>' +
                '<td id="state">等待上传...</td>' +
                '<td id="fileProgress"><a href="javascript:void(0);" class="remove-this">删除</a></td>' +
                '</tr>' );
            //删除
            $list.on('click', '.remove-this', function () {
                if(file !=undefined){
                    uploader.removeFile(file);
                }
                $(this).parent().parent().remove();
            });
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');
            var $licon = $li.find('#fileProgress');
            // 避免重复创建
            if ( !$percent.length ) {
                $licon.empty();
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($licon).find('.progress-bar');
            }
            $li.find('#state').text('上传中...');
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader.on( 'uploadSuccess', function( file, response ) {
            var fileId = $( '#'+file.id );
            fileId.find('.progress').fadeOut();
            fileId.find('#fileProgress').html('<a href="javascript:void(0);" class="remove-this">删除</a>');
            // if (response.success) {
            //     fileId.find('#state').html('<span class="text-success">已上传</span>');
            //     $( '#'+file.id ).find('input').val(response.savePath);
            // }else{
            //     fileId.find('#state').html('<span class="text-danger">上传出错</span>');
            // }
            if (response.hasError == false) {
                fileId.find('#state').html('<span class="text-success">已上传</span>');
                $( '#'+file.id ).find('input').val(response.savePath);
            }else{
                fileId.find('#state').html('<span class="text-danger">上传出错</span>');
            }
        });

        uploader.on( 'uploadError', function( file ) {
            var fileId = $( '#'+file.id );
            fileId.find('#state').html('<span class="text-danger">上传出错</span>');
            fileId.find('.progress').fadeOut();
            fileId.find('#fileProgress').html('<a href="javascript:void(0);" class="remove-this">删除</a>');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });
        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }
            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });
        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
    });
});

//删除
function delFile(obj,file) {
    obj.parent().parent().remove();
}