文件上传（一）XMLHttpRequest文件在前端页面压缩并上传

Posted on | In

代码如下

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
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>XMLHttpRequest上传文件</title>	
	<script type="text/javascript">
		/*
        三个参数
        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;
		//上传文件方法
		function UpladFile() {
			var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
			if(fileObj.size/1024 > 1025*100){// 大于100M不让上传
				alert("文件已超出系统100M接受大小！");
				return;
			}
			var url = "/common/upload"; // 接收上传文件的后台地址
			var form = new FormData(); // FormData 对象
			//表单对象可自行添加要发送的参数例如form.append("age"10) 则后台可接收到age=10的参数
			var index = fileObj.name.lastIndexOf(".");
			var suffix = fileObj.name.substr(index+1).toUpperCase();
			if((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 以自己返回的字段为准
			console.info('data='+JSON.stringify(data));
			if(data.code==0) {
				alert("上传成功！");
			}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 = '上传已取消';
		}
	</script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<!--图片上传：<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br/>-->
文件上传：<input type="file" id="file" name="myfile"  />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>
-------------本文结束感谢您的阅读-------------