webupload 上传文件

最新推荐文章于 2023-05-15 16:45:18 发布

啄木鸟-零号

最新推荐文章于 2023-05-15 16:45:18 发布

阅读量915

点赞数

分类专栏： js 文章标签： jquery js

本文链接：https://blog.youkuaiyun.com/null_cy/article/details/78894756

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用WebUploader实现的文件上传组件，支持多种文件类型，包括图片和文档，并实现了文件选择、上传进度显示及上传成功后的处理等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	var id="filelist_burowse";
	var uploader= WebUploader.create({
        pick: {
            id: '#filelist_burowse',
            label: '点击选择文件'
        },
        accept: {
            title: 'myself',
            extensions: 'jpg',
            mimeTypes: 'image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        },

        // swf文件路径
        swf: '../js/webuploader-0.1.5/Uploader.swf',
        fileNumLimit:1,
        server: 'upload.do',
        duplicate: true,
        auto:true,
        fileVal:"file"
	});
	
	$("#"+id).append('<ul id="'+id+'_filelist" class="plupload_filelist"></ul>');
	
	
	//添加文件事件
    uploader.on("fileQueued",function(file){
    	var inputHTML="";
    		inputHTML+='<li id="' + file.id + '" style="     overflow: hidden;   margin-top: 10px;    background-color: rgba(66, 139, 202, 0.11);">\
							<div class="plupload_file_name plupload_delete"><span>' + file.name + '</span><a href="javascript:;" style=" float: right;top: 5px;right: 5px;" class="glyphicon glyphicon-remove" ></a></div>\
							<div class="plupload_file_action"><a href="#"></a></div>\
							<div class="head" style="width:100%">\
							    <div id="progress" class="uploadify-progress" style="float:left;width:90%; background-color: darkgray;">\
							      <div class="uploadify-progress-bar" style="width: 0%;"></div>\
							    </div>\
							    <div id="view" style="float:left;width:10%;padding-left: 10px;" class="uploadify-progress-cuess">0%</div>\
							    <div style="float:right;width:5%;text-align:right;"></div>\
							</div>\
							<div class="plupload_file_status">正在上传</div>\
					</li>';
    		$("#"+id+"_filelist").append(inputHTML);
		
		
    });
    
    /** 上传成功事件*/
    uploader.on( 'uploadSuccess', function( file,response ) {
    	var json = JSON.parse(response);
		file["serviceData"]=json;
		var inputHTML="";
		inputHTML += '<div class="content" style="width:100%; clear:both; margin-top:5px;"><span style="display: block;"></span></div>';
		$("#"+file.id,$dialog).find("div.plupload_file_status").html("上传成功");
		$("#"+file.id,$dialog).append(inputHTML);
	});
    
    /** 进度条事件*/
    uploader.on("uploadProgress",function(file,progress){
    	console.log(progress);
    	$("ul li#"+file.id).find(".uploadify-progress-bar").css("width",(progress*100)+"%");
    	$("ul li#"+file.id).find(".uploadify-progress-cuess").html((progress*100).toFixed(2)+"%");
    });
    /** 队列文件全部上传成功后触发 */
    uploader.on("uploadFinished",function(){
    	$(".dialog-footer", $dialog).find("button:eq(0)").attr("disabled",false);
    });
    
    /** 删除事件绑定 */
    $("#"+id).on("click","div.plupload_delete a",function(e) {
    	//uploader.getFiles("complete"); 获取上传成功的文件（不包括取消的文件）
		var li = $(this).parent().parent();
		var file = uploader.getFile(li.attr("id"));
		uploader.stop(file);
		uploader.removeFile(file,true);
		li.remove();
		e.preventDefault();
		
	});