由于项目需要,自定义开发了一个图片视频上传的插件
图片视频添加、移除、上传、进度条。
主要采用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