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签名的用法，一文教会你（二）后台代码博文里。

HTML5 多图片上传（前端+后台详解）相关推荐

java图片上传并解析,详解SpringMVC实现图片上传以及该注意的小细节
本篇文章主要介绍了详解SpringMVC实现图片上传以及该注意的小细节,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 先附上图片上传的代码 jsp代码如下: ![](${path}/mall/i ...
图片上传通用后台模板
图片上传通用后台模板后台通用方法 @RequestMapping(value = "singlefile",method= RequestMethod.POST)@Respons ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白这个跨域异步上传功能我们借助了Jquery.for ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
HTML5实现图片上传与预览
File API File - 独立文件:提供只读信息,例如名称.文件大小.mimetype 和对文件句柄的引用. FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或 ...
spring boot图片上传到后台功能实现，浏览器可直接访问
1. 配置上传文件最大数值默认情况下,在spring boot嵌入的tomcat限制了上传文件的大小,在spring boot的我官方文档中说明,每个文件的最大配置为1Mb,单次请求的总文件数不能大 ...

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

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

1、参考jquery插件库

2、修改代码

3、添加的后台代码

4、删除的后台代码

HTML5 多图片上传（前端+后台详解）相关推荐

最新文章

热门文章