后台管理的web项目中，需要完成图片的上传功能
工具准备：一、图片上传的必要JS文件；二；当前页面中JS重写提交图片的方法；三、后台接收和处理图片的方法
整体思路：一、HTML中添加文件上传按钮；
二、选择图片的同时将图片传到后台进行下载和返回图片存储的地址；
三、前台获取到后台返回的图片地址，然后将地址值存到表单的输入框中；
四、提交表单请求，存储地址到数据库
详细步骤如下：
***项目中添加文件上传相关的JS文件，
***当前页面对这些JS文件的引用，
***重写上传图片的方法
***后台添加处理图片上传的方法，将图片下载下项目中指定的路径，将图片存储地址返回给前台
***前台将接受的图片地址添加到表单，等待提交并将地址传到数据库
***（无法上传完整的代码以及JS文件，再次只提供一个详细的思路，还请见谅）
*****HTML代码
*****JS方法
<script type="text/javascript">
$(function(){
$('#file_upload').fileupload({
url:'<%=request.getContextPath()%>/upload/headimg',
formData:{
fileName:'myfiles'
},
type:'post',
maxNumberOfFiles:1,
autoUpload:true,
dataType: 'json',
maxFileSize: 50000000,
done: function (e, data) {
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
if(progress < 100){
}else{
}
},
success:function(data){
if(data.filetype!="Image"){
$('#content').html("請上傳圖片!");
$('#tishi_a').click();
return false;
}
if(data.url!=null&&data.url!=""){
$('[name=coverpath]').val(data.url);//将后台返回的图片存储地址存入表单中，然后提交并保存到数据库
}
}
});
})
</script>
*****后台处理上传图片的方法
@RequestMapping("/headimg")
@ResponseBody
public Map<String, Object> headimg(HttpServletRequest request,
HttpServletResponse response) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; // 获得文件：
List<MultipartFile> myfiles = multipartRequest.getFiles("files");
// 可以在上传文件的同时接收其它参数
// 如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
// 这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建
String realPath = request.getSession().getServletContext()
.getRealPath("/upload/headimages");
// 设置响应给前台内容的数据格式
response.setContentType("text/plain; charset=UTF-8");
// 设置响应给前台内容的PrintWriter对象
Map<String, Object> map = new HashMap<String, Object>();
// 上传文件的原名(即上传前的文件名字)
String originalFilename = null;
// 如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
// 如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
// 上传多个文件时,前台表单中的所有<input
// type="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
List<Map<String, String>> datalist = new ArrayList<Map<String,String>>();
String url = "";
for (MultipartFile myfile : myfiles) {
if (myfile.isEmpty()) {
map.put("error", "请选择文件后上传");
return map;
} else {
originalFilename = myfile.getOriginalFilename();
System.out.println("文件原名: " + originalFilename);
map.put("filename", originalFilename);
originalFilename = new Date().getTime()
+ ""
+ originalFilename.substring(originalFilename
.lastIndexOf("."));
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
map.put("filesize", myfile.getSize());
String type= originalFilename.substring(originalFilename.lastIndexOf(".")+1);
type=type.toUpperCase();
if(ImageType.indexOf(type)>0){
map.put("filetype","Image");//图片
}else if(TableType.indexOf(type)>0){
map.put("filetype","Table");//表格
}else if(WordType.indexOf(type)>0){
map.put("filetype","Word");//word
}else if(TxtType.indexOf(type)>0){
map.put("filetype","Txt");//文本
}else if(CompressType.indexOf(type)>0){
map.put("filetype","Compress");//压缩
}else{
map.put("filetype","Other");//其他
}
System.out.println("========================================");
try {
// 这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉
// 此处也可以使用Spring提供的MultipartFile.transferTo(File
// dest)方法实现文件的上传
FileUtils.copyInputStreamToFile(myfile.getInputStream(),
new File(realPath, originalFilename));
//if(map.get("ify")!=null){//是否需要压缩
url=Configure.CONFIG_PROJECT_PATH+"/upload/headimages/" + originalFilename;
/*}else{
//图片压缩处理
ImgCompress imgCom = new ImgCompress(realPath,originalFilename);
imgCom.resizeFix(400, 400);
url="/upload/y" + originalFilename;
} */
zipWidthHeightImageFile(request.getSession().getServletContext().getRealPath("")+url,request.getSession().getServletContext().getRealPath("")+url,120,120,(float) 0.7);
} catch (IOException e) {
System.out.println("文件[" + originalFilename
+ "]上传失败,堆栈轨迹如下");
e.printStackTrace();
map.put("error", "1`文件上传失败，请重试！！");
return map;
}
}
}
map.put("url", url);
return map;
}
