IE上传文件到服务器

xiaoxiao2022-05-29 200

前言：项目用的是struts1，想要上传文件必须用jsp，传输指定类型写struts1标签，这样局限性太强，果断放弃，写一个servlet来实现。

web.xml

<servlet> <display-name>UploadServlet</display-name> <servlet-name>UploadServlet</servlet-name> <servlet-class>com.phlx.product.wx.action.UploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UploadServlet</servlet-name> <url-pattern>/UploadServlet.action</url-pattern> </servlet-mapping>

servlet

package ********; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; 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.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.human.util.SysConst; /** * Servlet implementation class UploadServlet */ public class UploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; // 上传文件存储目录 private static final String UPLOAD_DIRECTORY = "upload"; // 上传配置 private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB /** * 上传数据及保存文件 */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); // 检测是否为多媒体上传 if (!ServletFileUpload.isMultipartContent(request)) { // 如果不是则停止 PrintWriter writer = response.getWriter(); writer.println("Error: 表单必须包含 enctype=multipart/form-data"); writer.flush(); return; } // 配置上传参数 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中 factory.setSizeThreshold(MEMORY_THRESHOLD); // 设置临时存储目录 factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); ServletFileUpload upload = new ServletFileUpload(factory); // 设置最大文件上传值 upload.setFileSizeMax(MAX_FILE_SIZE); // 设置最大请求值 (包含文件和表单数据) upload.setSizeMax(MAX_REQUEST_SIZE); // 中文处理 upload.setHeaderEncoding("UTF-8"); // 构造临时路径来存储上传的文件 // 这个路径相对当前应用的目录 //String uploadPath = request.getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY; // 获取配置文件中项目绝对路径，并截取到WebRoot\\ String queryPath = SysConst.getConfField("queryPath"); queryPath = queryPath.substring(0, queryPath.indexOf("WEB-INF")); // 获取上传的图片 String uploadPath = "wxproduct\\img\\" + System.currentTimeMillis(); String filedest = queryPath + uploadPath; System.out.println("filedest:" + filedest); // 如果目录不存在则创建 File uploadDir = new File(uploadPath); if (!uploadDir.exists()) { uploadDir.mkdir(); } response.setCharacterEncoding("utf-8"); Map<String, String> map = new HashMap<String, String>(); try { // 解析请求的内容提取文件数据 @SuppressWarnings("unchecked") List<FileItem> formItems = upload.parseRequest(request); if (formItems != null && formItems.size() > 0) { // 迭代表单数据 for (FileItem item : formItems) { // 处理不在表单中的字段 if (!item.isFormField()) { String fileName = new File(item.getName()).getName(); String filePath = uploadPath + File.separator + fileName; File storeFile = new File(filedest); // 在控制台输出文件的上传路径 System.out.println(filedest); // 保存文件到硬盘 item.write(storeFile); request.setAttribute("message", "文件上传成功!"); map.put("errcode", "0"); map.put("picUrl", uploadPath); map.put("msg", "上传成功"); } } } } catch (Exception ex) { map.put("errcode", "-1"); map.put("picUrl", "-1"); map.put("msg", "上传失败"); } GsonBuilder gsonBuilder = new GsonBuilder(); gsonBuilder.setPrettyPrinting(); Gson gson = gsonBuilder.create(); String json = gson.toJson(map); PrintWriter out = null; try { out = response.getWriter(); } catch (IOException e) { e.printStackTrace(); } out.write(json); out.flush(); out.close(); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } }

这里主要说前台实现，用jquery实现ajax异步上传，上传没问题。upload.html

<!DOCTYPE html> <html> <head> <title>消息查询</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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="X-UA-Compatible" content="IE=8" > <script type="text/javascript" src="../../js/jquery-1.10.2.js"></script> <script type="text/javascript" src="../../js/jquery.easyui.min1.4.4.js"></script> <script type="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script> </head> <body> <img style="display:none;" id="imgFile"/> <input id="text" type="text" name="text"/> <form method="post" id="fm11" enctype="multipart/form-data" > <input name="uploadFile" id="uploadFile" type="file" onchange="submitForm(this.value)" style="position:absolute;left:0;top:0; width:100%;height:100%;z-index:999;opacity:0;filter:Alpha(Opacity=0)"/> </form> </body> <script type="text/javascript"> function submitForm(tvalue){ var aa = tvalue.split("."); if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp' ||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg'){ $('#fm11').form('submit',{ url:"/WebRoot/UploadServlet.action", onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.errcode=='0'){ $("#text").val(result.picUrl); $("#imgFile").attr("src","/WebRoot/"+result.picUrl); $("#imgFile").show(); //$("#uploadFile").val(result.picUrl); } else { alert("上传失败！"); /* $.messager.show({ title: '操作不成功!', msg: result.msg }); */ } } }); }else{ alert("文件格式错误，请重新选择图片！"); /* $.messager.alert({ title: '文件格式错误', msg: '请选择图片！' }); */ } } </script> </html>

但是现在的问题是，系统使用的是IE8，file标签的样式是不能修改的现在有两种方式类实现：

1、将file隐藏，用其他案件来触发file的click事件，实现修改的目的，但是，这种方式在ie上是不实现的，应为处于安全考虑，ie不允许代码实现触发上传功能，可以选择文件，提交显示，访问被拒绝，直接就是不走后台的。

2、把form放在a标签中，大小与a标签对齐，是file标签透明：opacity:0;“opacity:0;”在ie8以下是不兼容的，所以得用filter:Alpha(Opacity=0)

最终代码如下：替换body中所有代码

专利

最新回复(0)