利用KindEditor的uploadbutton实现异步上传图片
异步上传图片最经常使用的方法就是图片在iframe中上传。这样仅仅须要刷新iframe。而不用刷新整个页面。
KindEditor文本编辑器框架中uploadbutton能够帮助我们实现，不再须要我们自己去写iframe的实现。使用起来非常方便。
html部分：
.....
<input class="" type="text" name="beautyTown.img_0" id="img_url_0" value="" readonly="readonly" /> <input type="button" id="uploadButton_0" value="改动图片1" />
.....
js部分：
.....
KindEditor.ready(function(K) { $("input[id^='uploadButton_']").each(function(i,v){ var obj = this; var index=i; var uploadbutton = K.uploadbutton({ button : obj, fieldName : 'imgFile', url : 'upload_json.jsp', afterUpload : function(data) { if (data.error === 0) { var url = K.formatUrl(data.url, 'absolute'); K('#img_url_'+index).val(url); } else { alert(data.message); } }, afterError : function(str) { alert('自己定义错误信息: ' + str); } }); uploadbutton.fileBox.change(function(e) { uploadbutton.submit(); }); }); });
.....
js代码中用了模糊筛选器，能够绑定多个button 。
'upload_json.jsp'是处理上传图片的action,代码例如以下：
<%@ 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.json.simple.*" %> <%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper" %> <% //文件保存文件夹路径 //存放在\kindeditor\attached下 String savePath = request.getSession().getServletContext().getRealPath("/") + "upload/cms/"; //文件保存文件夹URL /kindeditor/attached/ String saveUrl = request.getContextPath() + "/upload/cms/"; //定义同意上传的文件扩展名 //定义同意上传的文件扩展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); 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"); //同意最大上传文件大小 struts.xml struts.multipart.maxSize=3G long maxSize = 3000000000l; 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");//image 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(); } if (!dirFile.isDirectory()) { out.println(getError("上传文件夹不存在 。
")); return; } //检查文件夹写入权限 if (!dirFile.canWrite()) { out.println(getError("上传文件夹没有写入权限。")); return; } MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request; //获得上传的文件名称 String fileName = wrapper.getFileNames("imgFile")[0];//imgFile,imgFile,imgFile //获得文件过滤器 File file = wrapper.getFiles("imgFile")[0]; //检查扩展名 String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ out.println(getError("上传文件扩展名是不同意的扩展名。\n仅仅同意" + extMap.get(dirName) + "格式。")); return; } //检查文件大小 if (file.length() > maxSize) { out.println(getError("上传文件大小超过限制。")); return; } //重构上传图片的名称 SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newImgName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; byte[] buffer = new byte[1024]; //获取文件输出流 FileOutputStream fos = new FileOutputStream(savePath +"/" + newImgName); //获取内存中当前文件输入流 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(); } //发送给 KE JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", saveUrl +"/" + newImgName); ///zswz/attached/image/20111129/ image 20111129195421_593.jpg out.println(obj.toJSONString()); %> <%! private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); } %>
后台使用的jar包有：
commons-fileupload-1.2.2.jar
json_simple-1.1.jar
struts2-core-2.1.8.1.jar
等。
转载于:https://www.cnblogs.com/bhlsheji/p/5371764.html
相关资源：各种正在加载中的gif动图集