HTML5 多圖片上傳（前端+后臺詳解）

• • 1、參考jquery插件庫
  • 2、修改代碼
  • 3、添加的后臺代碼
  • 4、刪除的后臺代碼

1、參考jquery插件庫

手機端實現(xiàn)多圖片上傳

2、修改代碼

我發(fā)現(xiàn)他這里的代碼僅僅只是顯示出來了，對后臺一點作用都沒有，于是我對該代碼進(jìn)行了修改
注意：我這里用了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);//下面的這段代碼是我自己添加的，每添加一張圖片就上傳到服務(wù)器并給數(shù)據(jù)庫插入一條記錄//思路大概是把我們上傳的圖片轉(zhuǎn)成base64的格式，然后把base64放進(jìn)dealImage（）方法中進(jìn)行壓縮，因為有的圖片可能很大，這個時候我們需要把圖片壓縮一下，不想壓縮的就把dealImage（）方法刪掉就好了。//把圖片轉(zhuǎn)成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; //壓縮系數(shù)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初始值根據(jù)情況自定// 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);//必須通過回調(diào)函數(shù)返回，否則無法及時拿到該值} },//刪除 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";//在這里我進(jìn)行了一個刪除操作，把數(shù)據(jù)庫和服務(wù)器上的圖片給刪掉//這個為該圖片的id，用來區(qū)分具體為那個圖片var imgId = $(t).find("img").attr("id");//這個是刪除方法，同時刪除服務(wù)器文件和數(shù)據(jù)庫記錄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());//圖片名稱是 當(dāng)前日期 避免數(shù)據(jù)重復(fù)String fileName = fileAdd + ".jpg";//這個步驟是把base64轉(zhuǎn)成圖片，并存在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簽名的用法，一文教會你（二）后臺代碼
這篇博文詳細(xì)講解了我們需要用到什么工具類以及怎么回顯；

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簽名的用法，一文教會你（二）后臺代碼博文里。

總結(jié)

以上是生活随笔為你收集整理的HTML5 多图片上传（前端+后台详解）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。