EasyUI 结合spring MVC上传图片以及验证图片是否符合规范

来源：互联网发布：什么软件可以下载图片编辑：程序博客网时间：2024/06/09 18:11

近期正在学习使用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")@ResponseBodypublic 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，有不对的地方请多多指教

0 0