自定义图片视频上传插件

由于项目需要，自定义开发了一个图片视频上传的插件

图片视频添加、移除、上传、进度条。

主要采用websocket实现图片分片上传和进度条。

返回结果为图片服务器中保存的图片的实际名称。

效果图：

关键代码：

index.html

$("#btn").click(function(){
	var photovideo = photoVideo();
	photovideo.openUploadWindow();
})

photoVideo.js 

var photoVideo = (function(windows){
	
	var photoVideo = function(){
		return new photoVideo.fn.init();
	}
	
	photoVideo.fn = photoVideo.prototype = {
		
		constructor:photoVideo,
		init: function(){
			this.serverUrl = "http://gdt.xxz.gov.cn:8015"; //接收图片服务地址
			this.fileSplitSize = 50000; //资源分片大小
			this.stompClient = {};	//stom客户
			this.uploadStatus = false;//上传状态
			this.uploadList = [];//上传列表
			this.resultList = [];//上传成功结果列表
			this.uuid = this.getUuid();//生成唯一标识
			this.webSocketConnect();//建立webSocket链接并获取链接唯一标识
			this.key = "";//传输通道标识
		},
		openUploadWindow: function(){	//设置图片和视频上传的窗口显示
			var me = this;
			$("body").append('<div class="upload_background">'+
								'<div class="upload_window">'+
									'<div class="upload_title">'+
										'图片视频上传'+
									'</div>'+
									'<div class="upload_content">'+
										'<div class="photo_area">'+
											'<div class="pv_title">图片</div>'+
											'<div id="photo_content" class="pv_content">'+
												'<div class="pv_add">'+
													'<input class="pv_input" type="file" name="" id="uploadImg" multiple accept="image/*">'+
												'</div>'+
											'</div>'+
											
										'</div>'+
										'<div class="video_area">'+
											'<div class="pv_title">视频</div>'+
											'<div id="video_content" class="pv_content">'+
												'<div class="pv_add">'+
													'<input class="pv_input" type="file" name="" id="uploadVideo" multiple accept="video/*">'+
												'</div>'+
											'</div>'+
										'</div>'+
									'</div>'+
									'<div class="upload_btn">上传图片&视频</div>'+
								'</div>'+
							'</div>');
			//点击标题栏关闭
			$(".upload_title").click(function(){
				if(me.uploadStatus){
					alert("正在上传请勿操作");
					return;
				}
				me.closeUploadWindow();
			});
			//图片上传点击事件
			$("#uploadImg").change(function(){
				me.readFile(this,"img");
			});
			//视频上传点击事件
			$("#uploadVideo").change(function(){
				me.readFile(this,"video");
			});
			//上传
			$(".upload_btn").on("click",function(){
				if(me.uploadStatus){
					alert("正在上传请勿重复提交");
					return;
				}
				me.upload();
			});
			
		},
		closeUploadWindow: function(){	//关闭上传接口
			var me = this;
			var res = true;
			if(me.resultList.length != 0){
				res = confirm("退出将不保留已经上传的记录！");
			}
			if(res){
				me.init();  //关闭前重新初始化
				$(".upload_background").remove();//关闭窗口
			}
		
			
		},
		readFile: function(obj,type){//处理图片并添加都dom中的函数
			var me = this;
			// 获取input里面的文件组
			var fileList = obj.files;
			if(($("#photo_content>div").each(function(){}).length + fileList.length > 4&&type=="img")||($("#video_content>div").each(function(){}).length + fileList.length > 4&&type=="video")){
				alert("最多选择三张"+type);
				return;
			}
			//对文件组进行遍历，可以到控制台打印出fileList去看看
			for(var i=0;i<fileList.length;i++){
				var reader= new FileReader();
				reader.readAsDataURL(fileList[i]);
				(function(_i){ 
					// 当文件读取成功时执行的函数
					reader.onload=function(e){
						//将结果添加到待上传列表中
						var url = "'"+URL.createObjectURL(fileList[_i])+"'";
						me.uploadList.push({
							name: fileList[_i].name,
							size: fileList[_i].size,
							data: this.result,
							type: type,
							url: url
						});
						if(type == "img"){
							$("#photo_content").prepend('<div class="pv_photo"><span data-name="'+fileList[_i].name+'"></span><img src="'+this.resul