Uploadify v3.2.1 上传图片并预览
前端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 | <script type= "text/javascript" > $( function () { $( "#upload_org_code" ).uploadify({ 'height' : 27, 'width' : 80, 'buttonText' : '选择图片' , 'swf' : '${pageContext.request.contextPath}/js/uploadify/uploadify.swf' , 'uploader' : '${pageContext.request.contextPath}/uploadIMGSerlet' , 'auto' : true , 'multi' : false , 'removeCompleted' : false , 'cancelImg' : '${pageContext.request.contextPath}/js/uploadify/uploadify-cancel.png' , 'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png' , 'fileSizeLimit' : '2MB' , 'onUploadSuccess' : function (file,data,response){ $( '#' + file.id).find( '.data' ).html( '' ); $( "#upload_org_code_name" ).val(data); $( "#upload_org_code_img" ).attr( "src" , "${pageContext.request.contextPath}/getImg?file=" +data); $( "#upload_org_code_img" ).show(); }, //加上此句会重写onSelectError方法【需要重写的事件】 'overrideEvents' : [ 'onSelectError' , 'onDialogClose' ], //返回一个错误,选择文件的时候触发 'onSelectError' : function (file, errorCode, errorMsg){ switch (errorCode) { case -110: alert( "文件 [" +file.name+ "] 大小超出系统限制的" + jQuery( '#upload_org_code' ).uploadify( 'settings' , 'fileSizeLimit' ) + "大小!" ); break ; case -120: alert( "文件 [" +file.name+ "] 大小异常!" ); break ; case -130: alert( "文件 [" +file.name+ "] 类型不正确!" ); break ; } }, }); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | < tr > < td align="right">< font style="color: red;">*</ font >组织代码机构:</ td > < td > < table > < tr > < td width="45%">< input type="file" name="upload_org_code" id="upload_org_code"/></ td > < td >< img style="display: none" id="upload_org_code_img" src="" width="150" height="150"></ td > </ tr > </ table > < input type="hidden" name="upload_org_code_name" id="upload_org_code_name" /> < hr > </ td > </ tr > |
后端servlet:
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 | package com.mybank.enterprise.framework.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import com.mybank.enterprise.util.Constant; import com.mybank.enterprise.util.StringUtil; public class UploadIMGSerlet extends HttpServlet { private static final long serialVersionUID = 1L; // 上传文件的保存路径 private String configPath = Constant.RB.getString( "img_path" ); // 临时文件路径 private String dirTemp = "resource/temp/" ; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this .doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String ret_fileName = null ; //返回给前端已修改的图片名称 request.setCharacterEncoding( "UTF-8" ); response.setContentType( "text/html; charset=UTF-8" ); PrintWriter out = response.getWriter(); // 文件保存目录路径 String savePath = configPath; // 临时文件目录 String tempPath = this .getServletContext().getRealPath( "/" ) + dirTemp; // 创建文件夹 File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } // 创建临时文件夹 File dirTempFile = new File(tempPath); if (!dirTempFile.exists()) { dirTempFile.mkdirs(); } DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold( 20 * 1024 * 1024 ); // 设定使用内存超过5M时,将产生临时文件并存储于临时目录中。 factory.setRepository( new File(tempPath)); // 设定存储临时文件的目录。 ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding( "UTF-8" ); try { List<?> items = upload.parseRequest(request); Iterator<?> itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); String fileName = item.getName(); if (fileName!= null ){ String endstr = fileName.substring(fileName.indexOf( "." ),fileName.length()); fileName = StringUtil.createSerial20().concat(endstr); ret_fileName = fileName; } if (!item.isFormField()) { try { File uploadedFile = new File(savePath,fileName); OutputStream os = new FileOutputStream(uploadedFile); InputStream is = item.getInputStream(); byte buf[] = new byte [ 1024 ]; // 可以修改 1024 以提高读取速度 int length = 0 ; while ((length = is.read(buf)) > 0 ) { os.write(buf, 0 , length); } // 关闭流 os.flush(); os.close(); is.close(); } catch (Exception e) { e.printStackTrace(); } } } } catch (FileUploadException e) { e.printStackTrace(); } //将已修改的图片名称返回前端 out.print(ret_fileName); out.flush(); out.close(); } } |
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 | package com.mybank.enterprise.framework.servlet; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.OutputStream; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.mybank.enterprise.util.Constant; public class GetIMGServlet extends HttpServlet { private static final long serialVersionUID = 2761789171087122738L; public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this .doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String file = req.getParameter( "file" ); File pic = new File(Constant.RB.getString( "img_path" )+file); FileInputStream fis = new FileInputStream(pic); OutputStream os = resp.getOutputStream(); try { int count = 0 ; byte [] buffer = new byte [ 1024 * 1024 ]; while ((count = fis.read(buffer)) != - 1 ) os.write(buffer, 0 , count); os.flush(); } catch (IOException e) { e.printStackTrace(); } finally { if (os != null ) os.close(); if (fis != null ) fis.close(); } } } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现