IE上传文件到服务器

前言：项目用的是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中所有代码

<img style="display:none;" id="imgFile"/>
<input id="text" type="text" name="text"/>
<a style="position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;"  href="javascript:void(0);" >上传
<div style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;">
    <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>
</div>
</a>