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

本文介绍了如何在EasyUI前端框架下,结合Spring MVC后端实现图片上传功能,并详细说明了如何对上传的图片进行合规性验证。通过示例代码展示jsp页面和Control层的关键实现步骤。
摘要由CSDN通过智能技术生成

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值