如何实现java webApp异步上传图片，先了解以下几个问题：
1.图片上传；
2.图片上传预览；
3.上传图片更改地址异步添加到数据库；
主要内容
本示例主要采用纯HTML前端和JavaScript代码作工具，查询有关demo其实现图片上传的代码范例如下：
（1）点击上传图片的div代码：
|
1
2
3
4
5
6
|
<div id="div1" class="photo"> <input type="file" id="choose" accept="image/*" multiple > <a id="upload">上传图片</a> <a class="myinputimg" onclick="selectphoto();">从图库中选择</a> <a class="myinputimg" id="back">取消</a></div> |
（2）javaScript代码
|
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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
|
<script type="text/javascript"> //获取上传图片的input表单元素 var filechooser = document.getElementById("choose"); //创建用于压缩图片的canvas var canvas = document.createElement("canvas"); //获取canvas的视觉属性 var ctx = canvas.getContext('2d'); //瓦片canva var tCanvas = document.createElement("canvas"); var tctx = tCanvas.getContext("2d"); //画布的大小 var maxsize = 100 * 1024; //上传图片点击事件 $("#upload").on("click", function() { filechooser.click(); }) .on("touchstart", function() { //添加元素属性 $(this).addClass("touch"); }) .on("touchend", function() { //移除元素属性 $(this).removeClass("touch"); }); //元素改变 filechooser.onchange = function() { //如果选择为空，返回操作 if (!this.files.length) return; //创建上传图片的数组 var files = Array.prototype.slice.call(this.files); //选择为数量大于1张时，反回操作，这里根据需求设定；pc端测试一次可以上传若干张图片，移动端选择一张，页面只能预览一张。由于是移动端，所以作此判断。 if (files.length >1) { alert("一次只能上传1张图片"); return; } //遍历上传图片的文件数组，可不用遍历，直接取即可。 files.forEach(function(file, i) { //判断图片格式 if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return; var reader = new FileReader(); var li = document.createElement("li");// 获取图片大小 var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB"; //图片预览 li.innerHTML = '<div class="progress"><span></span></div><div class="size">' + size + '</div>'; //追加图片预览代码； $(".img-list").append($(li)); reader.onload = function() { var result = this.result; var img = new Image(); img.src = result; //图片显示 $(li).css("background-image", "url(" + result + ")"); //如果图片大小小于100kb，则直接上传 if (result.length <= maxsize) { img = null; upload(result, file.type, $(li)); return; }// 图片加载完毕之后进行压缩，然后上传 if (img.complete) { callback(); } else { img.onload = callback; } function callback() { var data = compress(img); upload(data, file.type, $(li)); img = null; } }; reader.readAsDataURL(file); }); }; //以下是图片压缩相关； //使用canvas对大图片进行压缩 function compress(img) { var initSize = img.src.length; var width = img.width; var height = img.height; //如果图片大于四百万像素，计算压缩比并将大小压至400万以下 var ratio; if ((ratio = width * height / 4000000) > 1) { ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; //铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 var count; if ((count = width * height / 1000000) > 1) { count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 var nw = ~~(width / count); var nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (var i = 0; i < count; i++) { for (var j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //进行最小压缩 var ndata = canvas.toDataURL('image/jpeg', 0.1); console.log('压缩前：' + initSize); console.log('压缩后：' + ndata.length); console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; } //图片上传，将base64的图片转成二进制对象，塞进formdata上传 function upload(basestr, type, $li) { var text = window.atob(basestr.split(",")[1]); var buffer = new Uint8Array(text.length); var pecent = 0, loop = null; for (var i = 0; i < text.length; i++) { buffer[i] = text.charCodeAt(i); } var blob = getBlob([buffer], type); var xhr = new XMLHttpRequest(); var formdata = getFormData(); formdata.append('upload', blob); //异步请求kindeditor插件的上传图片jsp页面 xhr.open('post', '<%=request.getContextPath()%>/kindeditor/jsp/upload_json.jsp'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { //返回服务器端的图片地址 var face_img=xhr.responseText; var id=$("#arId").text(); //异步像数据库中添加图片 $.ajax({ type:"POST", //异步请求Struts的action类将图片地址插入数据库 url:"add_article_faceurl.action", dataType:"json", data:"faceurl="+face_img+"&id="+id, async:true, success: function(msg){ //取添加数据库中的图片相关的id值，存入页面隐藏区域 $("#arId").text(msg); }, error: function(a){} }); } }; //模拟上传进度显示 //数据发送进度，前50%展示该进度 xhr.upload.addEventListener('progress', function(e) { if (loop) return; pecent = ~~(100 * e.loaded / e.total) / 2; $li.find(".progress span").css('width', pecent + "%"); if (pecent == 50) { mockProgress(); } }, false); //数据后50%用模拟进度 function mockProgress() { if (loop) return; loop = setInterval(function() { pecent++; $li.find(".progress span").css('width', pecent + "%"); if (pecent == 99) { clearInterval(loop); } }, 100); } xhr.send(formdata); } /** * 获取blob对象的兼容性写法 * @param buffer * @param format * @returns {*} */ function getBlob(buffer, format) { try { return new Blob(buffer, {type: format}); } catch (e) { var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder); buffer.forEach(function(buf) { bb.append(buf); }); return bb.getBlob(format); } } /** * 获取formdata */ function getFormData() { var isNeedShim = ~navigator.userAgent.indexOf('Android') && ~navigator.vendor.indexOf('Google') && !~navigator.userAgent.indexOf('Chrome') && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534; return isNeedShim ? new FormDataShim() : new FormData(); } /** * formdata 补丁, 给不支持formdata上传blob的android机打补丁 * @constructor */ function FormDataShim() { console.warn('using formdata shim'); var o = this, parts = [], boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36), oldSend = XMLHttpRequest.prototype.send; this.append = function(name, value, filename) { parts.push('--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"'); if (value instanceof Blob) { parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n'); parts.push(value); } else { parts.push('\r\n\r\n' + value); } parts.push('\r\n'); }; // Override XHR send() XMLHttpRequest.prototype.send = function(val) { var fr, data, oXHR = this; if (val === o) { // Append the final boundary string parts.push('--' + boundary + '--\r\n'); // Create the blob data = getBlob(parts); // Set up and read the blob into an array to be sent fr = new FileReader(); fr.onload = function() { oldSend.call(oXHR, fr.result); }; fr.onerror = function(err) { throw err; }; fr.readAsArrayBuffer(data); // Set the multipart content type and boudary this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); XMLHttpRequest.prototype.send = oldSend; } else { oldSend.call(this, val); } }; }</script> |
（3）kindeditor插件的上传图片jsp页面相关代码.
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="java.util.*,java.io.*" %><%@ page import="java.text.SimpleDateFormat" %><%@ page import="org.apache.commons.fileupload.*" %><%@ page import="org.apache.commons.fileupload.disk.*" %><%@ page import="org.apache.commons.fileupload.servlet.*" %><%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%><%@ page import="org.json.simple.*" %><%/** * KindEditor JSP * * 本JSP程序是演示程序，建议不要直接在实际项目中使用。 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。 * *///文件保存目录路径String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";//String savePath = "http:\\\\192.168.1.226:8080\\qslnbase\\uploadFile/";//String savePath = "D:/WWW/qslnADP/ADP/WebRoot/kindeditor/attached/";//文件保存目录URLString saveUrl = request.getContextPath() + "/attached/";//定义允许上传的文件扩展名HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("image", "gif,jpg,jpeg,png,bmp,blob");extMap.put("flash", "swf,flv");extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");//最大文件大小long maxSize = 1000000;response.setContentType("text/html; charset=UTF-8");if(!ServletFileUpload.isMultipartContent(request)){ out.println(getError("请选择文件。")); return;}//检查目录File uploadDir = new File(savePath);if(!uploadDir.isDirectory()){ out.println(getError("上传目录不存在。")); return;}//检查目录写权限if(!uploadDir.canWrite()){ out.println(getError("上传目录没有写权限。")); return;}String dirName = request.getParameter("dir");if (dirName == null) { dirName = "image";}if(!extMap.containsKey(dirName)){ out.println(getError("目录名不正确。")); return;}//创建文件夹savePath += dirName + "/";saveUrl += dirName + "/";File saveDirFile = new File(savePath);if (!saveDirFile.exists()) { saveDirFile.mkdirs();}SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");String ymd = sdf.format(new Date());savePath += ymd + "/";saveUrl += ymd + "/";File dirFile = new File(savePath);if (!dirFile.exists()) { dirFile.mkdirs();}//Struts2 请求 包装过滤器MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;//获得上传 的文件名String fileName1 = wrapper.getFileNames("upload")[0];//获得文件过滤器File file = wrapper.getFiles("upload")[0];//检查文件大小if(file.length() > maxSize){ out.println(getError("上传文件大小超过限制。")); return;}//检查扩展名String fileExt1 = fileName1.substring(fileName1.lastIndexOf(".") + 1).toLowerCase();//重构上传文件名SimpleDateFormat df1 = new SimpleDateFormat("yyyyMMddHHmmss");String newFileName1 = df1.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt1;byte[] buffer = new byte[1024];//获取文件输出流FileOutputStream fos = new FileOutputStream(savePath + newFileName1);String url=savePath + newFileName1;out.println(url);//获取内存中当前文件输入流InputStream in = new FileInputStream(file);try { int num = 0; while ((num = in.read(buffer)) > 0) { fos.write(buffer, 0, num); }} catch (Exception e) { e.printStackTrace(System.err);} finally { in.close(); fos.close();}%><%!private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString();}%> |
（4）有关kindeditor上传图片的jar包有如下所示
A.commons-fileupload-1.2.1.jar
B.commons-io-1.4.jar
C.json_simple-1.1.jar
这里没有用到有关于kindeditor的js代码，具体可参考：Kindeditor实现图片自动上传功能
（5）有关kindeditor上传图片预览的div如下
|
1
2
3
4
5
6
7
|
<div id="div2"> <ul class="img-list"> <li id="wy"> <img style="height:100%;width:100%;position:absolute;top:0px;" src="<%=request.getContextPath()%>/shequ/images/index.png;" > </li> </ul> </div> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
