當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

上传图片，使用很简单的办法上传图片

發布時間：2023/12/18 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了上传图片，使用很简单的办法上传图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用很簡單的辦法上傳圖片

1. 首先把上傳的頁面寫好

<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用很簡單的辦法上傳圖片</title> <head th:include="include::header"><link rel="shortcut icon" href="favicon.ico"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"><link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet"><link href="/css/animate.css" rel="stylesheet"><link href="/css/style.css?v=4.1.0" rel="stylesheet"> </head> <style>h3{color: #000023;display: block;line-height: 26px;text-align: left;}h4{color: #3b0000;margin-left: 8px;}.fist{background-color: #b9bebb;height: 26px;}.set-status{margin-left: 66px;margin-top: 10px;}.ps{color: #272727;font-family: "楷體";font-size: 16px;} </style> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"><div class="row"><div class="col-sm-12"><div class="ibox float-e-margins"><div class="ibox-content"><form method="POST" enctype="multipart/form-data" id="signupForm" ><input id="id" type="hidden" name="id" th:value="${wxMainHD.id}"><div class="fist-picture"><div class="fist" ><h3>首頁圖</h3></div><label class="fist-show" style="margin-top: 6px"><h4> 首頁展示圖（請點擊黑色線框中選擇需要上傳的圖片）：</h4></label><div class="form-group"><input accept=".jpg,.jpeg,.png" type="file" class="files" id="mainLogoHome" name="mainLogo" style="display:none;" onchange="fileChange(event)"><div class="picture" style="margin-left: 40px;border:1px solid #000"><img th:src="${wxMainHD.mainLogo}" id="img-change" width="600px" height="350px"><br><span style="color:grey;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;">圖片僅支持JPG／JPEG／PNG格式，大小不超過2M</span></div></div></div><div class="form-group"><div class="save-content" style="margin-left: 130px;margin-top: 10px"><button id="b1" type="submit" class="btn btn-primary" >上傳圖片</button> </div></div></form></div></div></div></div></div> <div th:include="include::footer"></div> <script type="text/javascript" src="/js/jquery-labelauty.js"></script> <script type="text/javascript" src="/js/wangEditor.js"></script> <script type="text/javascript" src="/js/appjs/sys/WxMainHome/editIn.js"></script> </body> </html>

JS：

/*** 設置默認規則*/ $(function () {validateRule(); }) var data=[];/*** 設定默認規則*/ $.validator.setDefaults({submitHandler : function() {if($('#img-change').attr("src").length==0){alert("請上傳首頁圖mainLogo！");}else{$('#b1').attr("disabled","true");saveEditIn();}} });/*** 設定單擊事件（首頁）*/ $("#img-change").click(function () {$("#mainLogoHome").click(); });/*** 單擊圖片區域選定需要上傳的圖片（首頁）* @param event* @returns {boolean}*/ var fileChange = function (event) {var files = event.target.files, file;if (files && files.length > 0) {// 獲取目前上傳的文件file = files[0];// 文件大小校驗的動作if (file.size > 1024 * 1024 * 2) {alert('圖片大小不能超過2MB!');return false;}// 獲取 window 的 URL 工具var URL = window.URL || window.webkitURL;// 通過 file 生成目標 urlvar imgURL = URL.createObjectURL(file);// 用attr將img的src屬性改成獲得的url$("#img-change").attr("src", imgURL);} };/*** 保存編輯的內頁*/ var saveEditIn = function () {layer.load(1,{shade: [0.5,"#6a6a6a"]})var formData = new FormData();// 將id值傳進來var id = $("#id").val();var homeId = $("#homeId").val();var imgDetail = editor.txt.html();var status = $('input:radio[name="status"]:checked').val();// 打印出相應字段console.log(imgDetail)console.log(status)// 與首頁相關console.log(document.getElementById("mainLogoHome").files[0]);if(document.getElementById("mainLogoHome").files[0]==="undefined"||document.getElementById("mainLogoHome").files[0]==null){formData.append("mainLogo",$("#img-change").attr("src"));} else {formData.append("file",document.getElementById("mainLogoHome").files[0],"mainLogo"+suffix($("#mainLogoHome").val()));}// 追加需要使用到的字段// 追加首頁的dformData.append("id",id);// 追加詳情頁的homeIdformData.append("homeId",homeId);// 追加詳情頁的imageUrlformData.append("imageUrl",imgDetail);// 追加首頁的statusformData.append("status",status);/*** AJAX請求---> POST*/$.ajax({type:"POST",data:formData,url:"/sys/WxMainHome/saveEditIn",async : false,processData:false,contentType: false,success : function(r) {if (r.code == 0) {parent.layer.msg("內頁編輯成功");parent.reLoad();// 獲取窗口索引var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);} else {parent.layer.msg(r.msg);}}}) }/*** 首頁* @param name* @returns {string}*/ var suffix = function (name) {var index1=name.lastIndexOf(".");var index2=name.length;var suffix=name.substring(index1+1,index2);return "."+suffix; }

2. 上傳圖片工具類util

上傳 FileUtils，就是將圖片保存到盤符當中，

package com.ultrapower.life.admin.util; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException;public class FileUtils {// /上傳public static String save(String dir, MultipartFile file) {if (file.isEmpty()) {return null;}String fileName = getPicRandomName(file.getOriginalFilename());File upload = getFileDir(dir);File dest = new File(upload,fileName);try {file.transferTo(dest);return Constant.imageUrl + dir+"/" + fileName;} catch (IOException e) {e.printStackTrace();}return null;}public static String getPicRandomName(String picName) {String name = "";String randomName = RandomValues.getRandoms(16);int index = picName.lastIndexOf(".");if(index<0)return randomName+".png";String picType = picName.substring(index);name = randomName + picType;return name;}public static File getFileDir(String id) {String childPath="/";String filePath = Constant.imageFilePath;if (StringUtils.isNotBlank(id)){childPath = id+"/";}//如果上傳目錄為/static/images/upload/,則可以如下獲取File upload=new File(filePath,childPath);if(!upload.exists()){upload.mkdirs();}System.out.println(upload.getAbsolutePath());return upload;}}

保存圖片時隨機生成文件名

RandomValues

package com.ultrapower.life.admin.util;/*** 生成指定位數隨機數* Created by wuyongchang on 2019/10/30 14:07*/ public class RandomValues {private static String[] randomValues = new String[]{"0","1","2","3","4","5","6","7","8","9","_","a", "b", "c", "d", "e", "f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"};private static String[] randomValuesNumber = new String[]{"0","1","2","3","4","5","6","7","8","9"};public static String getRandoms(int lenght) {StringBuffer str = new StringBuffer();for(int i = 0;i < lenght; i++){Double number=Math.random()*(randomValues.length-1);str.append(randomValues[number.intValue()]);}return str.toString();}public static String getRandomsNumber(int lenght) {StringBuffer str = new StringBuffer();for(int i = 0;i < lenght; i++){Double number=Math.random()*(randomValuesNumber.length-1);str.append(randomValuesNumber[number.intValue()]);}return str.toString();} }

圖片信息

ImgInfo

package com.ultrapower.life.admin.util;import lombok.Data;import java.util.Arrays;@Data public class ImgInfo {private Integer errno;private String[] data;@Overridepublic String toString() {return "ImgInfo [errno=" + errno + ", data=" + Arrays.toString(data) + "]";} }

3.controller層

/*** 編輯內頁* @param model* @param id* @return*/@Log("編輯內頁")@RequiresPermissions("sys:WxMainHome:editIn")@GetMapping("/editIn/{id}")public String editIn(Model model, @PathVariable("id") Integer id){WxHomeDetailVO wxMainHD = wxMainHomeService.getId(id);model.addAttribute("wxMainHD",wxMainHD);return prefix + "/editIn";}/*** 對編輯內頁保存* @param file* @param wxMainHome* @param wxMainDetail* @return*/@RequiresPermissions("sys:WxMainHome:editIn")@PostMapping("/saveEditIn")@ResponseBodypublic R saveEditIn(@RequestParam(value = "file",required = false) MultipartFile file, WxMainHome wxMainHome,WxMainDetail wxMainDetail){// 保存（內頁編輯）首頁boolean flag = wxMainHomeService.saveInfo(file,wxMainHome);if (flag) {return R.ok();} else {return R.error("保存失敗");}}

4. service及其實現類

service

boolean saveInfo(MultipartFile files, WxMainHome wxMainHome);

service實現類

/*** 保存首頁圖片* @param files* @param wxMainHome* @return*/@Override@Transactional(rollbackFor=Exception.class)public boolean saveInfo(MultipartFile files, WxMainHome wxMainHome) {String mainLogo = "";// 上傳圖片名String originalFileName = "";if (files != null){try {// 生成新的文件名byte[] fileBytes =files.getBytes();// 取得當前文件名originalFileName = files.getOriginalFilename();// 生成文件名if (originalFileName.contains("mainLogo")){String save = FileUtils.save(mainLogo,files);wxMainHome.setMainLogo(save);}} catch (IOException e) {e.printStackTrace();}}// 保存圖片后自動更新時間wxMainHome.setUpdateTime(LocalDateTime.now());boolean flag = wxMainHomeMapper.saveInfo(wxMainHome);return flag;}

5. mapper文件

(1)接口

Boolean saveInfo(WxMainHome wxMainHome);

(2)xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.ultrapower.life.mapper.WxMainHomeMapper"><resultMap id="ResultMap" type="WxMainHome"><id property="id" column="id"/><result property="position" column="position"/><result property="type" column="type"/><result property="name" column="name"/><result property="status" column="status"/><result property="mainLogo" column="main_logo"/><result property="createTime" column="create_time"/><result property="updateTime" column="update_time"/></resultMap><update id="saveInfo" parameterType="com.ultrapower.life.entity.WxMainHome">update wx_main_homesetstatus=#{status},main_logo=#{mainLogo},update_time=#{updateTime}where id=#{id}</update></mapper>

由于我們需要將上傳的圖片放到盤符上，因此需要在

application-dev.yml文件里設置路徑

這里設置好就可以了，還需要在本地搭建一個Nginx,方便開發

好了，我們來演示一下：

選擇圖片之前：

點擊之后：

圖片加載進來了：

保存之后：

OK 了!!!

總結

以上是生活随笔為你收集整理的上传图片，使用很简单的办法上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【转载】树莓派 Raspberry Pi
下一篇：广工anyview数据结构第七章(202