HTML5 多图片上传（前端+后台详解）

HTML5 多图片上传（前端+后台详解）

    • 1、参考jquery插件库
    • 2、修改代码
    • 3、添加的后台代码
    • 4、删除的后台代码

1、参考jquery插件库

手机端实现多图片上传

2、修改代码

我发现他这里的代码仅仅只是显示出来了，对后台一点作用都没有，于是我对该代码进行了修改
注意：我这里用了vue.js，直接用可能有些地方会报错，请大家修改后使用

imgChange :function (obj1, obj2,id) {var id = id;//console.info(id);//获取点击的文本框var file = document.getElementById(id);//存放图片的父级元素var imgContainer = document.getElementById(obj1);//获取的图片文件var fileList = file.files;//文本框的父级元素var input = document.getElementById(obj2);var imgArr = [];//var imgUrlArr = [];//遍历获取到得图片文件for (var i = 0; i < fileList.length; i++) {var imgUrl = window.URL.createObjectURL(file.files[i]);//console.info(imgUrl);//回显图片var imgList = document.getElementsByClassName("z_addImg");imgArr.push(imgUrl);var img = document.createElement("img");img.setAttribute("src", imgArr[i]);img.setAttribute("id",id+"_"+(imgList.length+1));var imgAdd = document.createElement("div");imgAdd.setAttribute("class", "z_addImg");imgAdd.appendChild(img);imgContainer.appendChild(imgAdd);//下面的这段代码是我自己添加的，每添加一张图片就上传到服务器并给数据库插入一条记录//思路大概是把我们上传的图片转成base64的格式，然后把base64放进dealImage（）方法中进行压缩，因为有的图片可能很大，这个时候我们需要把图片压缩一下，不想压缩的就把dealImage（）方法删掉就好了。//把图片转成base64然后上传var base64 = "";var str = "";var dealImage = this.dealImage;var reader = new FileReader();reader.readAsDataURL(file.files[i]);reader.onload = function(){base64 = this.result;dealImage(base64, 500, useImg);function useImg(base64) {str= base64;//这个就是我们最后需要的http({data: {encode:base64},url: 'projectFile/saveCheckPhoto',type: 'post',dataType: 'json',async: false,success: function(data) {}})};};};this.imgRemove();},// 压缩图片
dealImage :function (base64, w, callback) {var newImage = new Image();var quality = 0.6;    //压缩系数0-1之间newImage.src = base64;newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要var imgWidth, imgHeight;newImage.onload = function () {imgWidth = this.width;imgHeight = this.height;var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");if (Math.max(imgWidth, imgHeight) > w) {if (imgWidth > imgHeight) {canvas.width = w;canvas.height = w * imgHeight / imgWidth;} else {canvas.height = w;canvas.width = w * imgWidth / imgHeight;}} else {canvas.width = imgWidth;canvas.height = imgHeight;quality = 0.6;}ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(this, 0, 0, canvas.width, canvas.height);var base64 = canvas.toDataURL("image/*", quality); //压缩语句// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定// while (base64.length / 1024 > 150) {// 	quality -= 0.01;// 	base64 = canvas.toDataURL("image/jpeg", quality);// }// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑// while (base64.length / 1024 < 50) {// 	quality += 0.001;// 	base64 = canvas.toDataURL("image/jpeg", quality);// }callback(base64);//必须通过回调函数返回，否则无法及时拿到该值}
},//删除
imgRemove:function () {var projectId = getQueryString("projectId");var institutionsId = getQueryString("institutionsId");var imgList = document.getElementsByClassName("z_addImg");var mask = document.getElementsByClassName("z_mask")[0];var cancel = document.getElementsByClassName("z_cancel")[0];var sure = document.getElementsByClassName("z_sure")[0];for (var j = 0; j < imgList.length; j++) {imgList[j].index = j;imgList[j].onclick = function() {var t = this;mask.style.display = "block";cancel.onclick = function() {mask.style.display = "none";};sure.onclick = function() {mask.style.display = "none";t.style.display = "none";//在这里我进行了一个删除操作，把数据库和服务器上的图片给删掉//这个为该图片的id，用来区分具体为那个图片var imgId = $(t).find("img").attr("id");//这个是删除方法，同时删除服务器文件和数据库记录http({data: {originalName:imgId,projectId: projectId,institutionsId: institutionsId,},url: 'projectFile/deleteCheckPhoto',type: 'post',dataType: 'json',async: false,success: function(data) {}})};}};
}

3、添加的后台代码

后台代码仅供参考
在这里插入图片描述
这个是在yml中定义的，我定义的是D:/file下面。你也可以直接写死

	@Value("${store.dir}")private String storeDir;public Result saveCheckPhoto(ProjectFile projectFile){Result result = new Result();SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");String fileAdd = sdf.format(new Date());//图片名称是  当前日期    避免数据重复String fileName = fileAdd  + ".jpg";//这个步骤是把base64转成图片，并存在storeDir+"/checkPhoto/"+fileName这个目录下，这个storeDir是我们自己定义的，比如这个是D:/fileBase64ToPicture.GenerateImage(projectFile.getEncode(),storeDir+"/checkPhoto/"+fileName);String url = "/res/file/get/" + "checkPhoto" + "/" + fileName;projectFile.setId(UUIDTool.createUUID());projectFile.setUrl(url);projectFile.setCreateTime(new Date());projectFile.setFileType("jpg");projectFile.setType("checkPhoto");projectFile.setName(fileName);projectFileMapper.insert(projectFile);result.setMessage("保存成功！");result.setCode(1);return result;}

在这里面有个Base64ToPicture方法，以及以后需要显示，这个时候大家可以去看我以前的写一篇文章
jSignature签名的用法，一文教会你（二）后台代码
这篇博文详细讲解了我们需要用到什么工具类以及怎么回显；

4、删除的后台代码

public Result deleteCheckPhoto(ProjectFile projectFile){Result result = new Result();String contentId = projectFile.getOriginalName().substring(0,32); List<ProjectFile> list = projectFileMapper.queryCheckPhoto(projectFile);//这里是为了防止空指针if(list.size()>0){UploadUtil.delete(list.get(0).getUrl(),"D://ms_file");int count = projectFileMapper.deleteByPrimaryKey(list.get(0).getId());}result.setMessage("删除成功！");result.setCode(1);return result;
}

UploadUtil方法也在jSignature签名的用法，一文教会你（二）后台代码博文里。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/570439.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue2.0移动端自定义性别选择提示框

vue2.0移动端自定义性别选择提示框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能&#xff0c;很简单但是经常用到&#xff0c;于是写了一个小小的demo&#xff0c;记录下来。 效果图&#xff1a; 图片.png实现代码&#xff1a; <template><div class"app"><div class&q…
阅读更多...
Linux的一些简单的常用命令

Linux的一些简单的常用命令

基本操作 基本操作 1>.ls &#xff08;横向查看目录&#xff09; ll&#xff08;竖排查看目录&#xff09; 2>.mkdir &#xff08;创建文件夹&#xff09; 3>.cd 文件夹名 &#xff08;进入该文件夹&#xff09; cd ..&#xff08;返回上一级目录&#xff09; 4>.…
阅读更多...
程序10 VC编写批量重命名工具

程序10 VC编写批量重命名工具

实现对文件夹下的全部文件进行重命名。 本节编写一个批量重命名工具。学习内容&#xff1a;文件操作&#xff0c;文件遍历等知识API&#xff1a;CFileFindFindFileFindNextFilerename 视频学习地址&#xff1a;https://www.bilibili.com/video/av31482925/转载于:https://www.c…
阅读更多...
每个线程只对一个数据操作就不会出现线程安全问题-------------成员变量，用来计算累加的和...

每个线程只对一个数据操作就不会出现线程安全问题-------------成员变量，用来计算累加的和...

package charpter12; public class Processor implements Runnable { private int count; // 成员变量&#xff0c;用来计算累加的和 Override public void run() { for (int i 0; i < 100; i) { count i; } System.out.println(Thread.currentThread().getName() "…
阅读更多...
微信小程序入门的一些建议，替大家踩坑

微信小程序入门的一些建议，替大家踩坑

小程序入门教程1&#xff0c; 建议先去看官方文档2&#xff0c;说说app.json这个文件3、app.js4、点击事件5、跳转页面最后要说一下我踩的一个大坑&#xff0c;样式问题1&#xff0c; 建议先去看官方文档 微信小程序官方文档 官方文档里有下载微信开发者工具的地址&#xff0c…
阅读更多...
解决微信小程序新建项目没有样式问题，以及官方demo

解决微信小程序新建项目没有样式问题，以及官方demo

官方的demo 把这个下载下来&#xff0c;把dist目录下的app.wxss里面的样式全部放到我们项目的app.wxss里就可以了。 这个demo我们还可以参考。新开一个微信开发者工具&#xff0c;点击导入&#xff0c;然后导入dist目录&#xff0c;就可以运行起来了。在调试器的console中可以看…
阅读更多...
Java static 静态代码块、代码块

Java static 静态代码块、代码块

简述 static{} 静态代码块&#xff0c;加载类之前执行{} 代码块&#xff0c;每次new的时候都会被执行示例 类&#xff1a; public class Student {int age;String name;boolean sex;public Student(){age10;name"Xu";sexfalse;}static{System.out.println("This…
阅读更多...
云服务器Linux安装，配置，使用nginx

云服务器Linux安装，配置，使用nginx

云服务器Linux安装&#xff0c;配置&#xff0c;使用nginxlinux安装nginxnginx的使用linux安装nginx 检查是否安装了GCC&#xff08;可在任何目录下输入&#xff09; yum list installed | grep "gcc"如果像下图一样&#xff0c;就说明安装了&#xff0c;反之没安装…
阅读更多...
原来文化设计可以这样玩！

原来文化设计可以这样玩！

设计是什么&#xff1f;设计是一种以科学的方法去高效解决问题的办法&#xff0c;为之设计。例如一个灯&#xff0c;是为了照明&#xff0c;如果改良的灯&#xff0c;肯定是为了高效或者节能地解决照明这个需求&#xff0c;没毛病吧&#xff1f; 那么中秋的花灯是什么&#xff…
阅读更多...
Windows安装python，以及python的集成开发环境Pycharm

Windows安装python，以及python的集成开发环境Pycharm

安装python&#xff0c;以及python的集成开发环境Pycharm1&#xff0c;安装python&#xff08;Windows&#xff09;2&#xff0c;安装python的集成开发环境1&#xff0c;安装python&#xff08;Windows&#xff09; 进入python官网 点击图中标识出来的这个&#xff0c;是个ex…
阅读更多...
zbb20180913 java synchronized同步静态方法和同步非静态方法的异同

zbb20180913 java synchronized同步静态方法和同步非静态方法的异同

java synchronized同步静态方法和同步非静态方法的异同 所有的非静态同步方法用的都是同一把锁——实例对象本身&#xff0c;也就是说如果一个实例对象的非静态同步方法获取锁后&#xff0c;该实例对象的其他非静态同步方法必须等待获取锁的方法释放锁后才能获取锁&#xff0c;…
阅读更多...
Python 最难的问题

Python 最难的问题

Python 最难的问题 超过十年以上&#xff0c;没有比解释器全局锁&#xff08;GIL&#xff09;让Python新手和专家更有挫折感或者更有好奇心。 未解决的问题 随处都是问题。难度大、耗时多肯定是其中一个问题。仅仅是尝试解决这个问题就会让人惊讶。之前是整个社区的尝试&#x…
阅读更多...
解决echart中：Cannot read property ‘queryComponents‘ of undefined

解决echart中：Cannot read property ‘queryComponents‘ of undefined

在使用案例的echart的日历图表的时候&#xff0c;遇到了&#xff1a; Uncaught TypeError: Cannot read property ‘queryComponents’ of undefined 思考了很久&#xff0c;还百度了&#xff0c;结果还是不好使&#xff0c;最后终于被我在一个问答了找到了答案。 刚开始我是…
阅读更多...
idea导入gitlab上面的项目

idea导入gitlab上面的项目

** 点击工具栏的VCS - git - Clone,然后输入项目的git地址 ** 这个需要登陆过git账号&#xff0c;如果没登录过就会让你输账号密码
阅读更多...
ListT.Find用法学习

ListT.Find用法学习

泛型集合List<T>中的Find函数用于查找集合中符合指定条件的元素..相比foreach遍历元素&#xff0c;用Find函数查找&#xff0c;代码更简洁. 函数原型如下&#xff1a; public T Find(Predicate<T> match); 其中Predicate为C#定义好的委托&#xff0c;原型如下&…
阅读更多...
idea导入本地springboot项目

idea导入本地springboot项目

** 点击工具栏的file - new - project from Existing Sources 然后找到项目所在目录&#xff0c;点击该项目的pom.xml文件。一路点击下一步&#xff0c;即可。 **
阅读更多...
从零开始的全栈工程师——html篇1.6

从零开始的全栈工程师——html篇1.6

浮动与伪类选择器 一、浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征&#xff08;块和行级&#xff09; 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)float:left/right; 因为标准文档流会使页面的状态固定 元素会自动从左往…
阅读更多...
idea+springboot+mongodb的简单测试使用分享

idea+springboot+mongodb的简单测试使用分享

1&#xff0c;先去官网下载&#xff0c;选择版本&#xff0c;选择Windows&#xff0c;就可以点击下载了。 2&#xff0c;安装mongodb。 下一步安装 “install mongoDB compass” 不勾选&#xff08;当然你也可以选择安装它&#xff0c;可能需要更久的安装时间&#xff09;&a…
阅读更多...
project01

project01

the question 最早时间出发为第一架航班&#xff0c;接下来第二架要求&#xff1a;到达日期与第一架航班的出发日期的时间间隔不小于45分钟&#xff0c;且序号最小依次类推将所有航班排完the data the transmission of the data import numpy as np import pandas as pd from p…
阅读更多...
idea+springboot+mongodb的实战使用分享

idea+springboot+mongodb的实战使用分享

昨天的时候我们先在网上找了测试类&#xff0c;测试了一下mongdb的简单使用&#xff0c;今天就来实地在项目中用一用 没安装mongodb的参考我上一篇文章&#xff1a;ideaspringbootmongodb的简单测试使用分享 其实我们初学者最好是安装一个可视化的工具&#xff0c;这样方便我…
阅读更多...
最新文章

Copyright @ 2022~2023