文件上传

页面：

<div showCollapseButton="true">
        <h1 id="h1" style="margin-left:10px;">媒体信息</h1>
        <div id="toolbar1" class="mini-toolbar" style="padding:2px;">
           <form id="form_1" style="margin-right: 20px; float: left;" action="" enctype="multipart/form-data"       method="post">
              ![](?)
              <input name="file_1" id="file_1" style="position: absolute; opacity: 0;" onchange="getImgURL(this,1)" type="file" size="1" accept="image/*">
              <a class="mini-button" id="img_1" style="text-align: center; display: block;" plain="true" iconcls="icon-folderopen">正面像</a>
           </form>
        </div>
  </div>

1:包含文件的form需要声明enctype="multipart/form-data"
2：style="display: block;"，block表示独占一个块级元素，独占一行
3：将file标签设置为透明： style="position: absolute; opacity: 0;"
覆盖到a标签上，点击a其实就是在点击file（原因是如果给a标签加入点击事件触发文件选择，form表单提交的时候获取不到文件（页面会报错没有权限），取到file中的文件必须时候file标签点击事件触发）
4： accept="image/*"，该属性是限制文件上传类别的（H5以下不支持）所以加入：

function getImgURL(node,coid){
            var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
            var filetypes =[".jpg",".png"]; 
            var filepath = node.value;   
            var filemaxsize = 1024*2;//2M   
            if(filepath){   
                var isnext = false;   
                var fileend = filepath.substring(filepath.indexOf("."));   
                if(filetypes && filetypes.length>0){   
                    for(var i =0; i<filetypes.length;i++){   
                        if(filetypes[i]==fileend){   
                            isnext = true;   
                        break;   
                        }   
                    }   
                }   
                if(!isnext){   
                    alert("不接受此文件类型！");   
                    node.value ="";   
                    return false;   
                }   
            }else{   
                return false;   
            }
            if (isIE && !node.files) {   
                    var filePath = node.value;   
                    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");   
                    if(!fileSystem.FileExists(filePath)){   
                        alert("附件不存在，请重新输入！");   
                        return false;   
                    }   
                    var file = fileSystem.GetFile (filePath);   
                    fileSize = file.Size;   
            } else {   
                fileSize = node.files[0].size;   
            }   
                  
            var size = fileSize / 1024;   
            if(size>filemaxsize){   
                alert("附件大小不能大于"+filemaxsize/1024+"M！");   
                node.value ="";   
                return false;   
            }   
            if(size<=0){   
                alert("附件大小不能为0M！");   
                node.value ="";   
                return false;   
            }
        }

5:带文件的form表单提交

                form.attr('action','uploadImg.action');
                form.attr('method','post');
                form.ajaxSubmit({
                    url:"uploadImg.action",
                    type : 'post',  
                    dataType : 'text', 
                    success:function(data){
                        img.attr("src", "..\\"+data+"?"+new Date().getTime());
                        return false;  //阻塞表单自动提交
                    },
                    error : function(data) {  
                        alert("error:" + data.responseText); 
                        return false;  //阻塞表单自动提交
                    }  
                });

6：img.attr("src", "..\"+data+"?"+new Date().getTime()); 在src地址中加时间戳，防止页面图片不刷新或者不显示
7：html5，对于选中的照片可以直接回显

    //html5的照片回显
             var simpleFile = file.files[0];
             if(!/image\/\w+/.test(simpleFile.type)) {
                 alert("请确保文件类型为图像类型");
                 return false;
             }
             var reader = new FileReader();
             // 将文件以Data URL形式进行读入页面
             reader.readAsDataURL(simpleFile);
             reader.onload = function(e){
                 console.log(this.result);
                 img.attr("src",this.result);
             } 

8：后台

       @RequestMapping("/uploadImg.action")
    @ResponseBody
     /**
     * 上传数据及保存文件
     */
    public String uploadImg(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
        String reString="";
        // 检测是否为多媒体上传
        if (!ServletFileUpload.isMultipartContent(request)) {
            // 如果不是则停止
            PrintWriter writer = response.getWriter();
            writer.println("Error: 表单必须包含 enctype=multipart/form-data");
            writer.flush();
            return reString;
        }
               String serverPath="文件上传保存路径"；
        MultipartHttpServletRequest multipartRequest  =  (MultipartHttpServletRequest) request;  
        
         // 如果目录不存在则创建
        File uploadDir = new File(serverPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdirs();//mkdirs，创建文件或者文件夹，如果目标不存在一起创建
        }
        
        MultipartFile file1 = multipartRequest.getFile("file_"+coid);
        String fileName = file1.getOriginalFilename();
        int lastLength = fileName.lastIndexOf("."); 
        String fileType = fileName.substring(lastLength);              //获取上传图片的类型 
        //File.separator 在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,这个方法可以自动获取
        String filePath = serverPath + File.separator + "文件的名字"+fileType;
        // 在控制台输出文件的上传路径
        System.out.println(filePath);
        //上传文件
        try{
             File storeFile = new File(filePath);
             file1.transferTo(storeFile);//spring mvc提供的文件上传操作
             // Map<String,MultipartFile> fileMap  =multipartRequest.getFileMap();//多文件上传时使用
             reString=xdFilePath+ File.separator + coid+fileType;;
             request.setAttribute("message","文件上传成功!");
        }catch (Exception ex) {
            request.setAttribute("message",
                    "错误信息: " + ex.getMessage());
        }
        return reString;
    }