温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Jquery上传插件Uploadify无刷新上传文件

发布时间:2020-10-07 00:41:18 来源:网络 阅读:774 作者:jethai 栏目:web开发


Uploadify v3.2.1  上传图片并预览


前端JSP:

<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>


后端servlet:

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();     }   }



显示图片servlet

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();         }               }   }



img标签的src可以指向servlet只要返回流对象即可,常用的如验证码


参考文章:

http://www.cnblogs.com/yangy608/p/3915337.html


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI