近期正在学习使用EasyUI,EasyUI结合spring MVC上传图片以及验证上传文件是否符合规范,直接上代码:
jsp页面部分代码:
<form id="group-form" action="<c:url value='/group/create-or-update'/>" method="post" enctype="multipart/form-data">
<tr>
<td>Logo:</td>
<td><input name="logo" id="logoFile" class="easyui-filebox"></input></td>
</tr>
</form>
$(function() {
$( '#logoFile')
.filebox(
{
onChange : function() {
var name = $( '#logoFile').filebox(
'getValue');
var allowExtention = new Array("jpg", "png" );
var len = name.length;
var math = name.substring(len - 3, len);
Boolean
f = false;
for ( var i = 0; i < allowExtention.length; i++) {
if (allowExtention[i] == math) {
f = true;
}
}
if ($.trim(name) != "" && f == false) {
alert( '请选择jpg、png图片' );
$( '#logoFile').filebox( 'clear')
}
}
});
});
Spring MVC Control层代码
@RequestMapping(value = "/create", produces = "application/json;charset=UTF-8")
@ResponseBody
public void create(HttpServletRequest request, @RequestParam(value="logo", required=false) MultipartFile logo) throws IllegalStateException, IOException {<pre name="code" class="html"> String uPath = (String)request.getServletContext().getAttribute("uPath");
File dir = new File(uPath + logo_path);//存放图片路径<span style="white-space:pre"> </span>
if(!dir.exists()) {
dir.mkdirs();
}
if(logo != null && !logo.isEmpty()) {
int index = logo.getOriginalFilename().lastIndexOf('.');
String picName = DigestUtils.md5Hex(group.getId().toHexString()) + logo.getOriginalFilename().substring(index);
logo.transferTo(new File(uPath + logo_path + picName));
group.setLogo(logo_path + picName);
}
}
<input id= "logoFile" style=" width: 300px; height: 35px;"
data-options= "prompt:'Choose a file...',required:true" name="logo" value= "${g.logo}" ></input >
$(function() {
$( '#logoFile').filebox({
buttonText : 'Choose File',
buttonAlign : 'right',
onChange : function() {
var name = $( '#logoFile').filebox( 'getValue');
var allowExtention = new Array( "jpg", "png");
var len = name.length;
var math = name.substring(len - 3, len);
Boolean
f = false;
for ( var i = 0; i < allowExtention.length; i++) {
if (allowExtention[i] == math) {
f = true;
}
}
if ($.trim(name) != "" && f == false) {
alert( '请选择jpg、png图片' );
$( '#logoFile').filebox( 'clear')
}
}
});
});
以上就是相关代码,初涉EasyUI,有不对的地方请多多指教