弹出层和标签页

参考：https://blog.csdn.net/loveer0/article/details/81747084

http://www.webym.net/jiaocheng/950.html

需求：再弹出层中上传文件：

 

 <script type="text/javascript">
		//模态框显示时触发的事件,在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题
			$("#addSource").on('shown.bs.modal',function(e){
    var file_md5   = '';   // 用于MD5校验文件
    var block_info = [];   // 用于跳过已有上传分片
    var uploader;
  
   // alert("Dsf");
    // 创建上传
   uploader = WebUploader.create({
        swf: '${pageContext.request.contextPath}/webuploader-0.1.5/Uploader.swf',
        server: '${pageContext.request.contextPath}/resource/fileupload.action',          // 服务端地址
        pick: '#picker',              // 指定选择文件的按钮容器
        resize: false,
        chunked: true,                //开启分片上传
        chunkSize: 1024 * 1024 * 100,   //每一片的大小100M
        chunkRetry: 2,              // 如果遇到网络错误,重新上传次数
        threads: 1,                   // [默认值：3] 上传并发数。允许同时最大上传进程数。
    });

    // 上传提交,把文件分片分好，然后上传到服务器端。
    $("#ctlBtn").click(function () {
       // log('准备上传...');
        i = 1;
        uploader.upload();//开始上传
    });

    // 当有文件被添加进队列的时候-md5序列化
    uploader.on('fileQueued', function (file) {
    	$('#showpro').css('display','block');
    	 $("#filetext").text(  file.name + " 等待上传");
    	 /*   log("正在计算MD5值...");
        
        //添加文件进来时计算文件的MD5，用于文件的唯一标识，检查之前有没有上传一半出问题的，如果出问题了，那么，以MD5命名的文件夹肯定会有，那么我们传之后的就好了。
        uploader.md5File(file)

        .then(function (fileMd5) {
            file.wholeMd5 = fileMd5;
            file_md5 = fileMd5;
            log("MD5计算完成。");

            // 检查是否有已经上传成功的分片文件，检测是否有断点
            $.post('${pageContext.request.contextPath}/resource/check.action', {md5: file_md5}, function (data) {
                data = JSON.parse(data);

                // 如果有对应的分片，推入数组
                if (data.block_info) {
                    for (var i in data.block_info) {
                        block_info.push(data.block_info[i]);
                    }
                    log("有断点...");
                }
            })
        });*/
    });
/*
    // 发送前检查分块,并附加MD5数据
    uploader.on('uploadBeforeSend', function( block, data ) {
        var file = block.file;
        var deferred = WebUploader.Deferred();  

        data.md5value = file.wholeMd5;
        data.status = file.status;

        if ($.inArray(block.chunk.toString(), block_info) >= 0) {
            log("已有分片.正在跳过分片"+block.chunk.toString());
            deferred.reject();  
            deferred.resolve();
            return deferred.promise();
        }
    });
 */
    // 上传完成后触发
    uploader.on('uploadSuccess', function (file,response) {
    
    	 $("#filetext").text(file.name + " 上传完成");
    	$("#filename").val(file.name);
        /*log("上传分片完成。");
        log("正在整理分片...");
        //开始合并
        $.post('merge.php', { md5: file.wholeMd5, fileName: file.name }, function (data) {
            var object = JSON.parse(data);
            if (object.code) {
                log("上传成功");
            }
        });
    	*/
    });
   
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        $("#percentage_a").css("width",parseInt(percentage * 100)+"%");
        $("#percentage").html(parseInt(percentage * 100) +"%");
    });

    // 上传出错处理
    uploader.on('uploadError', function (file) {
        uploader.retry();
    });

    // 暂停处理
    $("#stop").click(function(e){
        log("暂停上传...");
        uploader.stop(true);
    })

    // 从暂停文件继续
    $("#start").click(function(e){
        log("恢复上传...");
        uploader.upload();
    })

    function log(html) {
        $("#log").append("<div>"+html+"</div>");
    }
    
    /*在模态框弹出后再初始化webuploader。,这样每次弹出模态框之后都加载一个边框，使按钮越来越大，所以需要在关闭模态框后销毁webuploader。
	*/
		//关闭模态框销毁WebUploader，解决再次打开模态框时按钮越变越大问题
		$('#addSource').on('hide.bs.modal', function () {
			
		$("#filetext").text("");
		uploader.destroy();
		});
    
});
			
</script>   

标签页：

参考：https://blog.csdn.net/rocling/article/details/82431722