图片异步上传，JQuery封装的异步图片（文件）上传，后台框架使用;
先上html代码和效果图
<!DOCTYPE HTML> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <form action="#(ctx)/test/upload" method="post"> 图片 ： <input type="file" name="img" οnchange="ajaxImgUpload(this,'hiddenImgId','showImgId');"/><br /> <input type="hidden" id="hiddenImgId" name="header"/> <div> <img id="showImgId" alt="" οnerrοr="setDefault(this,'/testUploadFile/assets/img/loadFailed.png');" src="#(ctx)/assets/img/noImage.png" width="300px" height="160px"> </div> </form> </body> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="#(ctx)/assets/js/common.js"></script> </html>
js代码
/** * 当图片加载错误时，设置一张默认的图片，免得尴尬^_^ * @param img 设置的图片暂时是写死的，应该通过参数过来 */ function setDefault(img,src){img.src=src; } /** * 自己封装的jquery.ajax文件上传方法 * @param fileInput 文件选择input * @param hiddenImgId 图片路径隐藏域，做数据库持久 * @param showImgId 要展示上传后的图片img标签id */ function ajaxImgUpload(fileInput,hiddenImgId,showImgId){ if(!isExt(fileInput)){ alert("支持的图片文化上传格式暂只支持jpg,jpeg,png,bmp;请重新选择！"); return; } var formData = new FormData(); formData.append("header", fileInput.files[0]); var url = "commom/file/upload"; ajaxPost(url, { data : formData, contentType: false, //必须false才会自动加上正确的Content-Type processData: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理 success : function(ret){ console.log(ret); if(ret.isOk){ var path = ret.uploadPath+ret.fileName; document.getElementById(hiddenImgId).value = path; document.getElementById(showImgId).src = "commom/file/download?path="+path; }else{ alert(ret.msg); } } }) } /** * 判断后缀是否支持图片 * @param fileName */ function isExt(fileInput){ var exts = new Array("jpg","jpeg","png","bmp"); //"\."做一个转义 var values = fileInput.value.split("\."); //转小写 sn.toLowerCase() 转大写 sn.toUpperCase() var ext = values[values.length-1].toLowerCase(); for(var s in exts){ if(exts[s] === ext){ return true; } } return false; } /** * ajaxPost请求 * 支持文件上传，下面是注意事项： * var formData = new FormData(); * formData.append("header", fileInput.files[0]); * 必须false才会自动加上正确的Content-Type * 必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理 * contentType: false, processData: false, * @param url * @param options */ function ajaxPost(url,options){ var defalutOptions = { type : 'POST', cache : false, data : {}, dataType : 'json', contentType: true, processData: true, success : function(ret,textStatus,jqXHR){ if(ret.isOk){ alert(ret.msg); }else{ alert(ret.msg); } }, error : function(ret){ alert("联系管理员！！！") }, complete : function(XHR, TS){ //console.log(XHR); } } for(var o in options){ defalutOptions[o] = options[o]; } $.ajax(url,defalutOptions); } /** * ajaxGet请求(请求数据相关) * @param url * @param options */ function ajaxGet(url,options){ var defalutOptions = { type : 'GET', cache : false, data : {}, dataType : 'json', success : function(ret,textStatus,jqXHR){ if(ret.isOk){ alert(ret.msg); }else{ alert(ret.msg); } }, error : function(ret){ alert("联系管理员！！！") }, complete : function(XHR, TS){ //console.log(XHR); } } for(var o in options){ defalutOptions[o] = options[o]; } $.ajax(url,defalutOptions); } 后台代码（JFinal实现）
package demo; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import javax.servlet.ServletOutputStream; import com.jfinal.aop.Clear; import com.jfinal.core.ActionKey; import com.jfinal.core.Controller; import com.jfinal.kit.Ret; import com.jfinal.log.Log; import com.jfinal.upload.UploadFile; public class TestController extends Controller{ private Log log = Log.getLog(getClass()); public static final String extName = ".jpg"; @ActionKey("/test") public void index(){ render("index.html"); } /** * 文件上传 * @date 2017年6月7日 * @author ChoxSu */ @Clear @ActionKey("/commom/file/upload") public void updload(){ System.out.println("go go go "); UploadFile file = null; try { file = getFile("header", getAvatarTempDir(), getAvatarMaxSize(), "UTF-8"); //getFile("img", getAvatarTempDir(), getAvatarMaxSize()); } catch (Exception e) { String errmsg = "Posted content length of * exceeds limit of "+getAvatarMaxSize(); if(e.getMessage().indexOf("exceeds limit of")>errmsg.length()){ renderJson(Ret.fail("msg", "文件上传大小限制"+getAvatarMaxSize())); }else{ renderJson(Ret.fail("msg", e.getMessage())); } } if(file == null){ renderJson(Ret.fail("msg", "请选择图片")); } renderJson(Ret.ok("status", "SUCCESS").set("fileName", file.getFileName()).set("uploadPath", file.getUploadPath())); } /** * 文件下载 * @date 2017年6月7日 * @author ChoxSu */ @Clear @ActionKey("/commom/file/download") public void download(){ //JFinal 方式返回下载--推荐使用 //renderFile(new File(uploadPath"D:\\upload_jyoga\\upload\\avatar\\agrzx4.png")); renderFile(new File(getPara("path"))); //常规方式 oldType(); } @Deprecated private void oldType(){ /*FileInputStream fi = null; ServletOutputStream os = null; byte[] b = new byte[2000]; try { fi = new FileInputStream(new File("D:\\upload_jyoga\\upload\\avatar\\agrzx4.png")); os = getResponse().getOutputStream(); while(fi.read(b)>0){ os.write(b); } os.flush(); } catch (Exception e) { log.error(e.getMessage(), e); }finally{ try { if(os!=null){ os.close(); } if(fi!=null){ fi.close(); } } catch (IOException e) { log.error(e.getMessage(), e); } } renderNull();*/ } public static String getAvatarTempDir() { return "/upload/avatar/temp/"; } // 用户上传图像最多只允许5M大小 public static int getAvatarMaxSize() { return 5 * 1024 * 1024; } }
不吝啬^_^点个赞
