freemarker+springMVC+ajaxfileupload实现异步图片上传（单张）
第一步：下载JQuery的JS文件ajaxfileupload.js 并引入到freemarker
第二步：freemarker页面
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="zh-cn" class="hb-loaded">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script language="javascript" src="js/ajaxfileupload.js" > </script>
<script type="text/javascript">
function preview(file){
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}else{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
<script>
//新建或编辑 保存提交
function submitPic(){
var type="1";//展示图片
var f = $("#file").val();
if(f==null||f==""){
$("#picTip").html("<span style='color:Red'>错误提示:上传文件不能为空,请重新选择文件</span>");
return false;
}else{
var extname = f.substring(f.lastIndexOf(".")+1,f.length);
extname = extname.toLowerCase();//处理了大小写
if(extname!= "jpeg"&&extname!= "jpg"&&extname!= "gif"&&extname!= "png"){
$("#picTip").html("<span style='color:Red'>错误提示:格式不正确,支持的图片格式为：JPEG、GIF、PNG！</span>");
return false;
}
}
var file = document.getElementById("file").files;
var size = file[0].size;
if(size>2097152){
$("#picTip").html("<span style='color:Red'>错误提示:所选择的图片太大，图片大小最多支持2M!</span>");
return false;
}
ajaxFileUploadPic(name,type);
}
function ajaxFileUploadPic() {
$.ajaxFileUpload({
url : 'saveorupdate.action?type=1', //用于文件上传的服务器端请求地址
secureuri : false, //一般设置为false
fileElementId : 'file', //文件上传空间的id属性 <input type="file" id="file" name="file" />
type : 'post',
dataType : 'json', //返回值类型 一般设置为json
success : function(data, status) //服务器成功响应处理函数
{
var path = data.Path;
//alert(data.filePath);
$("#picTip").html("<span style='color:Red'>图片上传成功!图片地址为：path</span>");
},
error : function(data, status, e)//服务器响应失败处理函数
{
//alert(data.filePath);
$("#picTip").html("<span style='color:Red'>图片上传成功!</span>");
}
});
return false;
}
</script>
</head>
<body>
<div id="uploadPicWindow" class="easyui-window" title="上传图片" style="width:420px;height:220px;padding:20px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true">
<form id="picForm" action="" method="post">
<div id="preview"></div>
<div style="margin-bottom:20px">
选择图片:
<input type="file" name="file" id="file" data-options="prompt:'Choose a file...'" style="width:80%" onchange="preview(this);"/>
</div>
<div id="picTip"></div>
<div id="formWindowfooterPic1" style="padding:5px;text-align:right;">
<a href="#" onclick="submitPic();" class="easyui-linkbutton" data-options="iconCls:'icon-save'">提交</a>
</div>
</form>
</div>
</body>
</html></span>
第三步：Controller
<span style="font-size:18px;">@RequestMapping(value="saveorupdate",method = RequestMethod.POST)
@ResponseBody
public String upload_yz(HttpServletRequest request) throws Exception {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = null;
file = multipartRequest.getFile("file");// 获取上传文件名
String uploadUrl = uploadService.uploadFile(file, request);
return "{\"filePath\":\""+uploadUrl+"\"}";
}</span>
<span style="font-size:18px;"><span style="white-space:pre"></span>/**
* 上传文件
* @param file文件
* @param folder文件夹名称
* @param request
* @return
* @throws IOException
*/
public String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String rootPath = request.getRealPath("/");
String prefix = uploadUrlsConfigurer.getContextProperty(request);
String datePath = format.format(new Date());
String appPath = prefix+"/"+datePath;
FileUtils.createFilePath(request.getRealPath("/"), appPath);
String fileName = Identities.uuid2() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
/*
* /upload/other/2015-04-15/cea78319e0ea4756b29de05b2cc431ab.pdf
* */
FileCopyUtils.copy(file.getBytes(), new File(request.getRealPath("/") + appPath+"/"+fileName));
return "/" + appPath+"/"+fileName;
}</span>
附页面效果：
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。