基于springmvc+ajax+jquery实现图片上传

之前做了一个图片ajax上传的功能 记录一下如何实现

 <input type="file"   id="pictureUpload">

首先 需要引入jquery 然后需要一个file类型的 input

第二步 

 

$("#pictureUpload").change(function(){

    var fileName=$(this).value;  //获取文件名 
    var suffixIndex=fileName.lastIndexOf(".");
    suffix=fileName.substring(suffixIndex+1).toUpperCase();
    if(suffix!="BMP"&&suffix!="JPG"&&suffix!="JPEG"&&suffix!="PNG"&&suffix!="GIF"){
    	  var file = $("#pictureUpload");
    	  file.after(file.clone().val(""));
    	  file.remove();
    	  return;
     }

 var formData = new FormData();
 formData.append('file', $('#pictureUpload')[0].files[0]);  //添加图片信息的参数
    //开始上传
    $.ajax({
    	  type: "POST",
    	        url: "fileUploadPage",
    	        data:formData,
    	        cache: false, //上传文件不需要缓存
    	        processData: false,// 告诉jQuery不要去处理发送的数据
    	        contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    	        encType:"multipart/form-data",
    	        success: function(data) {
    	           
    	           //在这我们可以获取到后台来的路径进行回显
    	           alert(data);
    	        }
    	    });
});

然后就是后台部分了 

加入文件上传需要用到的jar

    <dependency>  
            <groupId>commons-fileupload</groupId>  
            <artifactId>commons-fileupload</artifactId>  
            <version>1.3.1</version>
    </dependency>  
    <dependency>  
            <groupId>commons-io</groupId>  
            <artifactId>commons-io</artifactId>  
            <version>1.3.2</version>
    </dependency>  

然后配置好文件上传解析器

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>		<!--请求的编码格式-->
        <property name="maxUploadSize" value="102400000"></property>	<!--文件最大大小(字节) 1024*1024*50=50M-->
        <property name="resolveLazily" value="true"/>			<!--resolveLazily属性启用是为了推迟文件解析，以便捕获文件大小异常-->
        <property name="uploadTempDir" value="upload"></property>		<!--指定上传文件的临时文件夹，请在项目中创建好目录。-->
    </bean>

最后就是我们的 后台实现部分了

 @RequestMapping(value = "/fileUploadPage", method = RequestMethod.POST)
 @ResponseBody
 public String upload(HttpServletRequest req,HttpSession session) throws Exception{
        MultipartHttpServletRequest mreq = (MultipartHttpServletRequest)req;
        MultipartFile file = mreq.getFile("file");
        String fileName = file.getOriginalFilename();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
        //这里文件名生成策略比较简单
        String fname = sdf.format(new Date())+((int)(Math.random()*10))+((int)(Math.random()*10))+fileName.substring(fileName.lastIndexOf('.'));
        String name=req.getSession().getServletContext().getRealPath("/")+
                "upload/"+fname;
        FileOutputStream fos = new FileOutputStream(name);
        fos.write(file.getBytes());
        fos.flush();
        fos.close();
           return fname;
        }
        return "";
}

至此 一个简单的文件上传就完成了。

注意一下 需要进行图片 回显 别忘了配置资源映射

<mvc:resources mapping="/upload/**" location="/upload/"/>