海露-XShell.CN

仿京东样式,带前端压缩,带回调函数的上传功能,直接可以运行的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh" >
<head>
<style type="text/css">
.imageDiv {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position:absolute;
z-index:1;
top:0;
left:0;
width:160px;
height:130px;
background-color:rgba(0,0,0,.3);
display:none;
line-height:125px;
text-align:center;
cursor:pointer;
}
.cover .delbtn {
color:red;
font-size:20px;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.text-detail {
margin-top:40px;
text-align:center;
}
.text-detail span {
font-size:40px;
}
</style>
</head>
<body>
<body class="white-bg">

<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart="">
<div>
<p><span style="color: red">注:每张照片大写不可超过4M,且最多可以传十张</span></p>
<div class="picDiv">
<div class="addImages">
<input type="file" class="file"
multiple
accept="image/png, image/jpeg, image/gif, image/jpg"
style="position:absolute;top:0;left:0;width:160px;height:130px;opacity:0;">
<div class="text-detail">
<span>+</span>
</div>
<input type="hidden" class="img_ids" value="" >
</div>
</div>
</div>
</form>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script src="/js/ex-upload.js"></script>
<script>
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型

$(".file").change(function() {
//获取选择图片的对象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
//得到所有的图片文件
var fileList = docObj.files;
//循环遍历
for (var i = 0; i < fileList.length; i++) {
const rand = Math.random().toString(36).substr(2);
//动态添加html元素
var picHtml = "<div class='imageDiv' > <img id='img" + rand + "' src='https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
picDiv.prepend(picHtml);
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img" + rand);
if (fileList && fileList[i]) {
//图片属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '160px';
imgObjPreview.style.height = '130px';

var myFormData = new FormData();
myFormData.append("file", fileList[i]);
hl_uploadFile('/common/upload',myFormData,true,function (res) {
console.info(res);
imgObjPreview.src = res.url;
var id = res.fileName;//如果是附件表,这里应该是id,不是fileName
if($('.img_ids').val()==''){
$('.img_ids').val(id);
}else{
$('.img_ids').val($('.img_ids').val()+'-'+id);
}
console.info($('.img_ids').val());
});
}
}

/*删除功能*/
$(".delbtn").click(function() {
var _this = $(this);
_this.parents(".imageDiv").remove();
});
});
</script>

</body>
</html>

ex-upload.js文件如下内容,带回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
/*
三个参数
file:一个是文件(类型是图片格式),
w:一个是文件压缩的后宽度,宽度越小,字节越小
objDiv:一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload = function () {
var re = this.result;
canvasDataURL(re, w, objDiv)
}
}

function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}

/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
}


var xhr;

//上传文件方法
//url:上传文件地址
//formData:var myFormData = new FormData();myFormData.append("file", fileList[i]);
//cprStatus:是否压缩
//callback:回调方法
function hl_uploadFile(url,formData,cprStatus,callback) {
var fileObj = formData.get("file"); // js 获取文件对象
formData.delete("file");
if (fileObj.size / 1024 > 1025 * 100) {// 大于100M不让上传
alert("文件已超出系统100M接受大小!");
return;
}
var url = url; // 接收上传文件的后台地址
var form = formData; // FormData 对象
//表单对象可自行添加要发送的参数例如form.append("age"10) 则后台可接收到age=10的参数
var index = fileObj.name.lastIndexOf(".");
var suffix = fileObj.name.substr(index + 1).toUpperCase();
if (cprStatus == true && (fileObj.size / 1024 > 1025) && (suffix == "BMP" || suffix == "JPG" || suffix == "JPEG" || suffix == "PNG" || suffix == "GIF")) { //大于1M,并且是图片类,进行压缩上传
if (fileObj.size / 1024 > 1025 * 20) {// 大于20M不让上传
alert("图片已超出系统20M接受大小!");
return;
}
var startTime = new Date(); // 结束时间
console.info("文件大小为:" + fileObj.size / (1024 * 1024) + "M,压缩中...");
photoCompress(fileObj, {
quality: 0.2
}, function (base64Codes) {
var endTime = new Date(); // 结束时间
console.info("文件压缩后大小为:" + base64Codes.length / (1024 * 1024) + "M,用时" + (endTime - startTime) + "毫秒,开始上传!");
var bl = convertBase64UrlToBlob(base64Codes);
//直接向FormData对象中添加File或Blob,就像下面这样:
form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败

xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart = function () {//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时,以上传的文件大小为0
};

xhr.send(form); //开始上传,发送form数据
});
} else { //小于等于1M 原图上传
form.append("file", fileObj); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败

xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart = function () {//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时,以上传的文件大小为0
};

xhr.send(form); //开始上传,发送form数据
}

//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
/*console.info('evt=' + JSON.stringify(evt));*/
var data = JSON.parse(evt.target.responseText);
//根据自己服务器返回的参数进行判断,可自定success 或者data.code = 200 以自己返回的字段为准
if (data.code == 0) {
console.info("上传成功!");
callback(data);
} else {
alert("上传失败!");
}

}
}

//上传失败
function uploadFailed(evt) {
console.info(evt);
alert("上传失败!!!");
}

//取消上传
function cancleUploadFile() {
xhr.abort();
console.info("取消方法被调用");
}

//上传进度实现方法,上传过程中会频繁调用该方法
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (progressBar == null || percentageDiv == null) {
return;
}
// event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
if (evt.lengthComputable) {//
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
var time = document.getElementById("time");
var nt = new Date().getTime();//获取当前时间
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差,单位为s
ot = new Date().getTime(); //重新赋值时间,用于下次计算
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
//上传速度计算
var speed = perload / pertime;//单位b/s
var bspeed = speed;
var units = 'b/s';//单位名称
if (speed / 1024 > 1) {
speed = speed / 1024;
units = 'k/s';
}
if (speed / 1024 > 1) {
speed = speed / 1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余时间
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
time.innerHTML = ',速度:' + speed + units + ',剩余时间:' + resttime + 's';
if (bspeed == 0) time.innerHTML = '上传已取消';
}


如果对您有帮助,请作者喝杯LK:

 评论


博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本站使用 Material X 作为主题 , 总访问量为 次 。
字数统计:14.4k 载入天数...载入时分秒...