Maven项目web多图片上传及格式验证的实现

先来展示一下效果

客户在添加的时候进入添加页面,需要上传文件时的相关页面及代码

:前端页面重要代码,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多图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • maven项目在svn中的上传与检出的方法

    前言 企业开发中经常使用svn来为我们控制代码版本,也经常使用maven来管理项目.下面将介绍一下如何将maven项目上传到svn中,如何将项目从svn中检出. 上传到svn maven项目上传与普通项目上传并无区别.这里做一下简单介绍: 右击项目:选择Team:选择Share Project: 仓库类型选择svn 点击next 选择你要分享的资源库.点击next 选择使用指定的模块名.然后在浏览中选择要上传的位置.然后点击finish. 点击finish后进入同步视图界面.这个界面需要我们选择

  • Maven入门之使用Nexus搭建Maven私服及上传下载jar包

    一. 私服搭建及配置 1 . 私服简介 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则,私服请求外部的远程仓库,将构件下载到私服,再提供给本地仓库下载. 我们可以使用专门的 Maven 仓库管理软件来搭建私服,比如:Apache Archiva,Artifactory,Sonatype Nexus.这里我们使用 Sonatype Nexus. 2 . 安装Nexus 2 .

  • maven项目打包上传到私有仓库

    目录 1. 背景 2. 步骤 2.1 修改pom.xml 2.2 命令执行 2.3 成功后的依赖 3. 扩展 1. 背景   最近有些自己制作的工具包,需要单独抽取出来之后,在打包的时候,同时上传到自己的maven私服仓库,供别人引用,并且还能够引用的时候看到源码.但是,在上传的过程中总是失败不成功,特别上火.最后总算成功,记录下步骤,希望能够帮助到需要的人. 2. 步骤   先说下我的要求: 本地打包能够自动上传maven私服仓库. 别人引用后,能够看到源码及注释. 2.1 修改pom.xml

  • maven将项目打包上传到nexus私服的详细教程

    1.pom.xml文件添加distributionManagement节点. 模块项目中如果存在父子项目,且父子项目的jar包都需要上传到私服的话,直接在父项目pom文件中添加这段配置,如果只需要将子项目jar包上传私服,则在子项目的build标签同级添加这段配置. <!-- 使用分发管理将本项目打成jar包,直接上传到指定服务器 --> <distributionManagement> <!--正式版本--> <repository> <!-- ne

  • Maven项目web多图片上传及格式验证的实现

    先来展示一下效果 客户在添加的时候进入添加页面,需要上传文件时的相关页面及代码 注:前端页面重要代码,multiple的作用是支持多图片上传,此处点击事件一定要使用onchange事件,切记不要误用onclick事件!! 注:<c:forTokens>标签的作用是以 delims 中的值分割循环遍历 以下为前端页面对应的onchange事件的代码及解析 //jQuery函数 对应上面的onchange事件 function uploadFile() { //由于该JSP页面只有一个表单,因此只

  • 项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)

    第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢.然后那时候也没有想到用jquery form插件. 后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式. 方案一:iframe+form表单 <f

  • Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • 在django中图片上传的格式校验及大小方法

    如下所示: Uploadfiles = request.FILES.get('参数', '') for i in Uploadfiles : # 图片大小的属性 i.size suffix = os.path.splitext(i.name)[1] if not suffix: return False elif suffix.lower() == '.jpeg' or suffix.lower() == ".png" or suffix.lower() == ".jpg&q

  • spring boot thymeleaf 图片上传web项目根目录操作步骤

    thymeleaf介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t

  • java web图片上传和文件上传实例详解

    java web图片上传和文件上传 图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String f

  • yii2中使用webuploader实现图片上传的实战项目

    图片上传几乎是应用必备,前面也针对 kartik 的 fileinput做了一篇详细的说明,不过很多人反馈各种问题,下面针对 webuploader 的使用单独写了一个组件.该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题,目前支持多图多字段多modal的混合上传. 介绍之前我们先演示下效果. 安装 推荐使用composer进行安装 $ php composer.phar require bailangzhan/yii2-webuploader dev-master 使用 par

  • SpringBoot项目整合FastDFS+Nginx实现图片上传功能

    目录 FastDFS概述 Fastdfs原理 安装Fastdfs 整合Nginx模块 安装Nginx SpringBoot整合Fastdfs FastDFS概述 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载体的在线服务,如相册网站.视频网站等等. FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用Fa

  • java web图片上传和文件上传实例

    图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String fileContentType;//图

  • Java通过jersey实现客户端图片上传示例

    在上一篇笔记 <SpringMVC实现图片上传>记录了将图片上传到本地的实现,在很多项目中都会有一台专门的文件服务器来保存文件的,这边记录下客户端通过jersey上传图片到文件服务端的实现. 由于要在不同主机上上传文件,所以不能直接通过流的方式来写,需要通过webService来完成,jersey是基于Java的一个轻量级RESTful风格的Web Services框架,它让客户端文件上传变得更简单. 1. maven依赖 spring的一些包以及fileupload和io包这边就不贴出来了.

随机推荐