AJAX图片上传

 

异步上传图片,并加载在jsp页面上

 

   JavaScript

 

	    function uploadPic() {  
	        // 上传设置  
	        var options = {  
	                // 规定把请求发送到那个URL  
	                url: "${webRoot}/dataCheck/uploadPic.do",  
	                // 请求方式  
	                type: "post",  
	                // 服务器响应的数据类型  
	                dataType: "json",  
	                // 请求成功时执行的回调函数  
	                success: function(data, status, xhr) {  
	                    // 图片显示地址  
	                    $("#allUrl").attr("src", "${webRoot}/"+data.path);  
	                    $("#dealImgURL").attr("value", data.path);  
	                }  
	        };  
	        $("#jvForm").ajaxSubmit(options);  
	    }  

 

 HTML

<input class="cs-hide" type="text" name="dataUnqualifiedTreatment.dealImgurl" id="dealImgURL"/>
 
    <td width="80%">  
		<img width="100" height="100" id="allUrl" class="preview"/>  
	        <!-- 在选择图片的时候添加事件，触发Ajax异步上传 -->  
		<input name="pic" type="file" onchange="uploadPic()"/>  
     </td>  

 

后台action(control)

    /** 
     * 使用Ajax异步上传图片 
     *  
     * @param pic 封装图片对象 
     * @param request 
     * @param response 
     * @throws IOException  
     * @throws IllegalStateException  
     */  
    @RequestMapping("/uploadPic")  
    public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {  
  
        try {  
            // 获取图片原始文件名  
            String originalFilename = pic.getOriginalFilename();  
            System.out.println(originalFilename);  
          
            // 文件名使用当前时间
            String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());  
          
            // 获取上传图片的扩展名
            String extension = FilenameUtils.getExtension(originalFilename);  
              
            // 图片上传的相对路径（因为相对路径放到页面上就可以显示图片）  
            String path = "/img/dataCheck/" + name + "." + extension;  
                        
            // 图片上传的绝对路径  
            String url = request.getSession().getServletContext().getRealPath("") + path;  
          
            File dir = new File(url);
            
            if(!dir.exists()) {  
            	dir.mkdirs();  
            }  
              
            // 上传图片  
            pic.transferTo(new File(url));  
          
            // 将相对路径写回（json格式）  
            JSONObject jsonObject = new JSONObject();  
            // 将图片上传到本地  
            jsonObject.put("path", path);  
            
            // 设置响应数据的类型json  
            response.setContentType("application/json; charset=utf-8");  
            // 写回  
            response.getWriter().write(jsonObject.toString());  
  
        } catch (Exception e) {  
            throw new RuntimeException("上传图片失败");  
        }  
    }