Controller后台处理:
package com.news.controller;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
@RequestMapping("/upload")
public class UpLoadIMGController {
@RequestMapping("/uploadIMG")
public void uploadIMG(HttpServletRequest request, HttpServletResponse response) throws Exception{
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
String ctxPath=request.getSession().getServletContext().getRealPath("/")+"uploadFiles";
ctxPath += File.separator;
// 创建文件夹
File file = new File(ctxPath);
if (!file.exists()) {
file.mkdirs();
}
String fileName = null;
String newName = null;
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
// 上传文件
MultipartFile mf = entity.getValue();
fileName = mf.getOriginalFilename();//获取原文件名
//获得当前时间的最小精度
SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmssSSS");
newName = format.format(new Date());
//获得三位随机数
Random random = new Random();
for(int i = 0; i < 3; i++){
newName = newName + random.nextInt(9);
}
File uploadFile = new File(ctxPath + newName+fileName.substring(fileName.lastIndexOf(".")));
try {
FileCopyUtils.copy(mf.getBytes(), uploadFile);
} catch (IOException e){
e.printStackTrace();
}
}
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(newName+fileName.substring(fileName.lastIndexOf(".")));
}
@RequestMapping("/getImg")
public void getImg(HttpServletRequest request, HttpServletResponse response) throws Exception{
String file = request.getParameter("file");
String path = request.getSession().getServletContext().getRealPath("/")+"uploadFiles"+File.separator+file;
File pic = new File(path);
FileInputStream fis = new FileInputStream(pic);
OutputStream os = response.getOutputStream();
try {
int count = 0;
byte[] buffer = new byte[1024 * 1024];
while ((count = fis.read(buffer)) != -1)
os.write(buffer, 0, count);
os.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
if (os != null)
os.close();
if (fis != null)
fis.close();
}
}
}
jsp前台:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.uploadify.min.js"></script>
<link href="${pageContext.request.contextPath}/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#upload_org_code").uploadify({
'height' : 27,
'width' : 80,
'buttonText' : '选择图片',
'swf' : '${pageContext.request.contextPath}/css/uploadify.swf',
'uploader' : '${pageContext.request.contextPath}/upload/uploadIMG',
'auto' : true,
'multi' : false,
'removeCompleted':false,
'cancelImg' : '${pageContext.request.contextPath}/js/uploadify-cancel.png',
'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png',
'fileSizeLimit' : '1MB',
'fileObjName' : 'file',
'onUploadSuccess':function(file,data,response){
$('#' + file.id).find('.data').html('');
$("#upload_org_code_name").val(encodeURI(data));
$("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg?file="+encodeURI(data));
$("#upload_org_code_img").show();
},
//加上此句会重写onSelectError方法【需要重写的事件】
'overrideEvents': ['onSelectError', 'onDialogClose'],
//返回一个错误,选择文件的时候触发
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小!");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确!");
break;
}
},
});
})
</script>
</head>
<body>
<table>
<tr>
<td align="right"><font style="color: red;">*</font>组织代码机构:</td>
<td>
<table>
<tr>
<td width="45%"><input type="file" name="upload_org_code" id="upload_org_code"/></td>
<td><img style="display: none" id="upload_org_code_img" src="" width="150" height="150"></td>
</tr>
</table>
<input type="hidden" name="upload_org_code_name" id="upload_org_code_name" />
<hr>
</td>
</tr>
</table>
</body>
</html>
特别注意:
$("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg?file="+encodeURI(data));
如果报未找到文件,不进请求方法的。请在方法处加上<span style="font-size:24px;color:#ff0000;"><strong>.do</strong></span>
<pre code_snippet_id="636289" snippet_file_name="blog_20150405_2_30604" name="code" class="html"> $("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg<span style="color:#ff0000;"><strong>.do</strong></span>?file="+encodeURI(data));
分享到:
相关推荐
uploadify V3.2.1上传插件,并且内含 404 Not Found问题的解决方法哦!
Uploadify-3.2.1 jQuery文件上传插件,使用uploadify组件可以实现异步无刷新多文件上传功能。
此js解决jquery.uploadify.3.2.1 在IE9,IE10中 上传文件的按钮会无法点问题
Uploadify是一个易集成的多文件上传解决方案,在手册翻译时,3.2版目前最新。作为一个jQuery插件,Uploadify不仅使用简单而且可定制性非常强。
uploadify + asp.net mvc实现文件上传功能
真正的jquery uploadify3.2.1,许多上传的都是3.1.1或者2.2
uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
官网上下的,但很坑,经过两天查遍度娘谷哥,修复此版本人已用,目前暂未出现任何问题
uploadify + asp.net mvc实现文件上传功能
基于flash的文件批量上传,根据官网文档写的一个使用java的小例子,除了JDK,其他的所需自愿均存在
UpLoadify3.2.1版本上传插件的实现demo,你值得拥有.zip
jquery.uploadify 3.2.1(目前最新)上传实例Demo,已 测试在IE、火狐、谷歌下可用。
主要用于图片的批量上传之后预览图片,以及单独删除图片等 可以直接用于 springmvc等框架
HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。仿照uploadify写的,www.codesc.net已做过修正,本例的配置参数均与uploadify官网一致,参照官网的api就可以了,直接把文件夹上传到支持php的服务器...
jquery uploadify插件Demo
MVC JQuery uploadIfy 批量上传并写入数据库信息
一直以来jquery uploadify上传插件都不支持中文,每次都用图片代替也没感觉什么,但是最近开发的项目中有些特殊要求,不得不使用中文,于是中文支持版就出来了,这个是基于uploadify 2.1.4版修改的,请朋友们给点力,我赚点...
该uploadify为目前官网最新版本,由鄙人修改后,可以支持buttonText属性为中文
文件包括Uploadify V3.2.1 上传文件报404 Not Found问题解决方法
基于Flash的多文件上传之jQuery插件(引入www.uploadify.com的Uploadify版本3.2.1版本),包括Flash源码: uploadify / uploadify.fla => Flash CS4的原始码 uploadify / => Flash Builder 4.6的ActionScript项目 ...