1.前段頁面以及JS

<!-- HTML --> <section class="content"><div class="row"><div class="col-xs-12"><div class="box box-success"><div class="row" style="margin-top: 1%;margin-buttom: 2%;"><div class="col-lg-2"><div class="input-group" style="padding-left: 20px;"><label>城市：</label><select name="city" id="city" style="width: 150px;"><option value="" selected="selected">--請選擇--</option><option value="022">天津</option><option value="0756">深圳</option><option value="0230">重慶</option><option value="0431">長春</option><option value="0280">成都</option><option value="027">武漢</option><option value="0769">東莞</option><option value="024">沈陽</option><option value="029">西安</option><option value="0322">南京</option></select></div></div></div><div class="row" style="margin-buttom: 2%;"><div class="col-lg-3"><div class="input-group" style="padding-left: 20px;"><label>選擇圖片：</label><input id="file" type="file" style="padding-top: 4px;margin-left: 10px;"></div></div></div><div class="row" style="margin-top: 1%;margin-buttom: 2%;"><div class="col-lg-6" style="margin-left: 30px;"><div class="input-group"><span><button type="button" onclick="addShowAfter()" class="btn btn-info" id="">提交</button></span><span style="margin: 50px;"><button type="button" onclick="sec()" class="btn btn-info" id="">取消</button></span></div></div></div></div></div></section> <!-- JS --> function addShowAfter() {var cituNum = $("#city").val();var file = $("#file").val();if (city!='' && city!=null){if (file!='' && file!=null){var fileData = new FormData();var file = document.getElementById("file");var filObj = file.files[0];fileData.append("file",filObj);fileData.append("cituNum",cituNum);$.ajax({xhrFields: {withCredentials: true},url:"${pageContext.request.contextPath}/showAfter/uploadFile",type:'POST',contentType:false,processData:false,async:false,data:fileData,success:function (data) {if(data!='' && data !=null){alert('上傳成功！');window.location.href="${pageContext.request.contextPath}/showAfter/findAll";}else{alert('上傳失敗！');}},error: function (data) {console.log(data);alert('上傳失敗！');}});} else {alert('請選擇文件！');}} else {alert('請選擇城市！');} }

后端代碼

package controller;import lombok.extern.slf4j.Slf4j; import model.ShowAfter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.commons.CommonsMultipartFile; import service.ShowAfterService; import util.AliyunOssUtil; import util.FileUtil; import util.UploadFileDto;import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.util.HashMap; import java.util.List; import java.util.Map;@Slf4j @Controller @RequestMapping("/showAfter") public class ShowAfterController {// @Value("${SystemData.returnUrlHead}")private String baseUrl = "存儲在服務器中的路徑帶域名"; // http://wzq.baidu.com/F// @Value("${SystemData.uploadPath}")private String basePath = "存儲在服務器中的路徑"; // /home/upLoadFile@Autowiredprivate ShowAfterService showAfterService;/*** 上傳圖片*/@RequestMapping(value = "/uploadFile")@ResponseBodypublic Object getuploadFile(@RequestParam("file") CommonsMultipartFile file, String cituNum) {System.out.println(file.getOriginalFilename() + "getOriginalFilename");System.out.println(file.getContentType() + "getContentType");System.out.println(file.getSize() + "getSize");String fileUrl = null;try{fileUrl =new ShowAfterController().uploadImageFile(file);}catch (Exception e){e.printStackTrace();}System.out.println(fileUrl);ShowAfter showAfter = new ShowAfter();showAfter.setCityNum(cituNum);showAfter.setImgUrl(fileUrl);return showAfterService.addShowAfter(showAfter);}public String uploadImageFile(CommonsMultipartFile file) throws IOException {// 保存圖片并生成url1String filePath = System.currentTimeMillis() + "." + "png";String httpPath = baseUrl + File.separator + "image" + File.separator + filePath;filePath = basePath + File.separator + "image" + File.separator + filePath;FileUtil.makeDirs(filePath);File newFile = new File(filePath);file.transferTo(newFile);UploadFileDto uploadFileDto = new UploadFileDto();uploadFileDto.setCode(1);uploadFileDto.setMsg("上傳圖片成功！");UploadFileDto.Data data = uploadFileDto.new Data();data.setSrc(httpPath);uploadFileDto.setData(data);return httpPath;}}

?

總結

以上是生活随笔為你收集整理的总结2：上传图片至指定服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

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