Maven项目web多图片上传及格式验证的实现
更新时间:2021年10月21日 16:00 点击:2314 作者:hah杨大仙
先来展示一下效果
客户在添加的时候进入添加页面,需要上传文件时的相关页面及代码
注:前端页面重要代码,multiple的作用是支持多图片上传,此处点击事件一定要使用onchange事件,切记不要误用onclick事件!!
注:<c:forTokens>标签的作用是以 delims 中的值分割循环遍历
以下为前端页面对应的onchange事件的代码及解析
//jQuery函数 对应上面的onchange事件 function uploadFile() { //由于该JSP页面只有一个表单,因此只需要定义下标为0即可指定当前表单 let formData = new FormData($("form")[0]); //关键代码:ajax异步上传图片 $.ajax({ url: "uploadFile",//此处对应controller控制层中RequestMapping注解中的值 data: formData,//需要上传的表单数据 type: "post",//此处要用post方式上传,原因是get方式对上传文件大小有限制 //processData 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data processData: false, //ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件。 contentType: false, success: function (msg) { //判断校验上传文件的格式是否为常用图片类型\ let str = ""; let split = msg.split(",");//用逗号切割 为数组 let flag = false; for (let i = 0; i < split.length; i++) { if (split[i].endsWith(".jpg") || split[i].endsWith(".png") || split[i].endsWith(".bmp") || split[i].endsWith(".jpeg") || split[i].endsWith(".gif")) { flag = true; } else { //一旦不满足上面的条件,就将旗帜flag设置为false,并打破循环 flag = false; break; } //循环遍历数组拼接字符串,src中需要添加虚拟路径 str += '<img src="/img/' + split[i] + '" width="50" height="50">'; } if (flag) { $("[name=img]").val(msg) $("#sp1").html(str) } else { alert("上传图片格式错误!!") $("[name=img]").val("")//清空之前的代码,后台JSR303自动校验不能为空 } } }) }
接下来看一下后台controller层的图片上传代码及解析
//@RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上。 //@RequestParam:将请求参数绑定到后台控制器的方法参数上(是springmvc中接收普通参数的注解)(以此确保和前端页面name属性中的值一致) @RequestMapping("uploadFile") @ResponseBody //加上 @ResponseBody 后,会直接返回 json 数据。 public String uploadFile(@RequestParam("file") MultipartFile[] files) throws IOException { //要存放图片的本机地址 String path = "D://img"; String[] fileNames = new String[files.length]; String imgs = ""; for (int i = 0; i < fileNames.length; i++) { //UUID用于随机生成不重复的文件名 // getOriginalFilename()该方法用于获取前台上传文件的名称,和UUID做此处理确保上传的文件名唯一 fileNames[i] = UUID.randomUUID().toString() + files[i].getOriginalFilename(); File file = new File(path, fileNames[i]); files[i].transferTo(file);//把文件路径所指向的文件上传到对应的目录下。 imgs += "," + fileNames[i]; } //截取imgs头部多出来的逗号 imgs = imgs.substring(1); return imgs; }
以上就为 Maven项目web多图片上传+上传文件的格式验证
到此这篇关于Maven项目web多图片上传及格式验证的实现的文章就介绍到这了,更多相关Maven web多图片上传内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/m0_55710969/article/details/120859330
上一篇: java实现登录验证码功能
下一篇: Java实现统计字符串出现的次数
相关文章
解决执行maven命令时提示Process terminated的问题
这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25- 这篇文章主要介绍了解决idea2020 maven无法自动导包的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13
解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效
这篇文章主要介绍了解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 这篇文章主要介绍了idea 打包maven项目忽略test文件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
详解Maven profile配置管理及激活profile的几种方式
这篇文章主要介绍了详解Maven profile配置管理及激活profile的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-26- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- 这篇文章主要介绍了详解idea从git上拉取maven项目详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-12
- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12