采用uploadify上传 官网:http://www.uploadify.com/ (有H5版本和flash版本,H5收费,所以暂时用flash)
uploadify的重要配置属性(http://www.uploadify.com/documentation/):
1.auto:是否选择之后立刻上传
2.buttonText:按钮的文字
3.fileObjName:服务器端获取上传文件name的属性
4.fileTypeDesc:文件类型显示提示描述
5.fileTypeExits:控制文件类型
6.formData:在上传过程中,额外的参数和值
7.height:按钮高度
8.multi:是否允许多选(默认为true)
9.overrideEvents:要覆盖的事件
10.swf:指向uploadify的flash文件
11:uploader:后台处理上传文件的地址
12:按钮的宽度
==================================
<script type="text/javascript"> $(function(){ //把上传身份证正面的a标签变成一个uploadify的组件 $("#uploadBtn1").uploadify({ buttonText:"身份证正面", fileObjName:"file", fileTypeDesc:"身份证正面图片", fileTypeExts:"*.gif; *.jpg; *.png", multi:false, swf:"/js/plugins/uploadify/uploadify.swf", uploader:"/realAuthUpload.do", overrideEvents:["onUploadSuccess","onSelect"], onUploadSuccess:function(file,data){ $("#uploadImg1").attr("src",data); $("#uploadImage1").val(data); } }); $("#uploadBtn2").uploadify({ buttonText:"身份证反面", fileObjName:"file", fileTypeDesc:"身份证反面图片", fileTypeExts:"*.gif; *.jpg; *.png", multi:false, swf:"/js/plugins/uploadify/uploadify.swf", uploader:"/realAuthUpload.do", overrideEvents:["onUploadSuccess","onSelect"], onUploadSuccess:function(file,data){ $("#uploadImg2").attr("src",data); $("#uploadImage2").val(data); } });
});
</script>
<div class="form-group"> <label class="col-sm-4 control-label" for="address">身份证照片</label> <div class="col-sm-8"> <p class="text-help text-primary">请点击“选择图片”,选择证件的正反两面照片。</p> <a href="javascript:;" id="viewExample">查看样板</a> <div class="idCardItem"> <div> <a href="javascript:;" id="uploadBtn1" >上传正面</a> </div> <img alt="" src="" class="uploadImg" id="uploadImg1" /> <input type="hidden" name="image1" id="uploadImage1" /> </div> <div class="idCardItem"> <div> <a href="javascript:;" id="uploadBtn2" >上传反面</a> </div> <img alt="" src="" class="uploadImg" id="uploadImg2"/> <input type="hidden" name="image2" id="uploadImage2" /> </div> <div class="clearfix"></div> </div> </div>
=================================================================
前台controller
1.需要导入fileupload的包
<!--fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
2.在springMvc中加入multipartResolver
<!--文件上传解析器--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="100000000"></property> </bean>
package com.xmg.p2p.base.controller; import javax.servlet.ServletContext; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; import com.xmg.p2p.base.domain.Userinfo; import com.xmg.p2p.base.service.IRealAuthService; import com.xmg.p2p.base.service.IUserinfoService; import com.xmg.p2p.base.util.RequireLogin; import com.xmg.p2p.base.util.UploadUtil; /** * 实名认证控制 * @author Administrator * */ @Controller public class RealAuthController { @Autowired private ServletContext servletContext;
/**
* 文件上传
*/
@RequestMapping("realAuthUpload")
@ResponseBody
public String realAuthUpload(MultipartFile file){
//先得到basepath文件的绝对路径
String basePath = servletContext.getRealPath("/upload");//会上传到webapp下的upload文件夹
String filename = UploadUtil.upload(file, basePath);
//System.out.println("/upload/"+filename);
return "/upload/"+filename;
}
}
工具类
package com.xmg.p2p.base.util; import java.io.File; import java.io.IOException; import java.util.UUID; import org.apache.commons.io.FileUtils; import org.apache.commons.io.FilenameUtils; import org.springframework.web.multipart.MultipartFile; /** * 上传工具 * * @author Administrator * */ public class UploadUtil { /** * 处理文件上传 * * @param file * @param basePath * 存放文件的目录的绝对路径 servletContext.getRealPath("/upload") * @return */ public static String upload(MultipartFile file, String basePath) { String orgFileName = file.getOriginalFilename(); String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(orgFileName); try { File targetFile = new File(basePath, fileName); FileUtils.writeByteArrayToFile(targetFile, file.getBytes()); } catch (IOException e) { e.printStackTrace(); } return fileName; } }
============================================================