java實現圖片的上傳與展示實例代碼

前言

永新網站制作公司哪家好，找創新互聯！從網頁設計、網站建設、微信開發、APP開發、響應式網站設計等網站項目制作，到程序開發，運營維護。創新互聯于2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯。

在很多的網站都可以實現上傳頭像，可以選擇自己喜歡的圖片做頭像，從本地上傳，下次登錄時可以直接顯示出已經上傳的頭像，那么這個是如何實現的呢？下面話不多說了，來一起看看詳細的介紹吧

一、注意事項:

1,該項目主要采用的是springboot+thymeleaf框架

2,代碼展示的為ajax完成圖片上傳(如果不用ajax只需要改變相應的form表單配置即可)

二、效果實現:

1,頁面效果:

java實現圖片的上傳與展示實例代碼

2,文件夾路徑下就會多了對應的圖片:

java實現圖片的上傳與展示實例代碼

三、代碼實現:

1,在html文本中編輯為(采用thymeleaf框架):

<!-- 圖片文本框 -->
<input type="file" class="form-control" id="file" name="file" th:onchange="javascript:preview(this)">
<!-- 這個是在上傳之前回顯圖片圖片展示 -->
<div id="preview">
　　<!--這個是為了將頁面返回的圖片展示出來的.默認隱藏-->
　　<img  id="imgHidden" />
</div>

<!-- 提交...這里pageIndex和pageSize可傳可不傳,主要取決于提交之后是否需要回到當前頁面. -->
<button type="submit" th:onclick="javascript:submitForm([[${pageIndex}]],[[${pageSize}]])" class="btn btn-primary">提交</button>

2,編輯js代碼:

兩種情況:1,有file中有值的時候提交;2,file文件中沒有值的時候提交

function submitForm(pageIndex, pageSize) {
　　var formData = new FormData(); //將需要提交的參數封裝起來
　　formData.append("id", $("#id").val());
　　var zswb = $("#file").val(); //獲取file中的內容,看是否有值
　　if (zswb == '' || zswb.length < 1) { //沒有file提交的時候走的接口
　　　　$.ajax({
　　　　　　url : '/editMovieWithoutFile',
　　　　　　type : 'post',
　　　　　　data : formData,
　　　　　　processData : false,
　　　　　　contentType : false,
　　　　　　success : function(value) {
　　　　　　　　var result = JSON.parse(value);
　　　　　　　　if (result == 'true') {
　　　　　　　　　　window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
　　　　　　　　} else {
　　　　　　　　　　Lobibox.alert('error', {msg : "媒資信息更新失敗!!!"});
　　　　　　　　}
　　　　　　}
　　　　});
　　} else { //有file提交的時候走的接口
　　　　formData.append("file", $("#file")[0].files[0]);
　　　　$.ajax({
　　　　　　url : '/editMovieInfo',
　　　　　　type : 'post',
　　　　　　data : formData,
　　　　　　processData : false,
　　　　　　contentType : false,
　　　　　　success : function(value) {
　　　　　　var result = JSON.parse(value);
　　　　if (result == 'true') {
　　　　　　window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
　　　　} else {
　　　　　　Lobibox.alert('error', {msg : "媒資信息更新失敗!!!"});
　　　　}
　　　}
　　});
　}
}
//圖片回顯:
function preview(file) {
　　$("#imgHidden").css("display", "none");
　　var prevDiv = document.getElementById('preview');
　　if (file.files && file.files[0]) {
　　　　var reader = new FileReader();
　　　　reader.onload = function(evt) {
　　　　　　prevDiv.innerHTML = '<img  src="' + evt.target.result + '" />';
　　　　}
　　　　reader.readAsDataURL(file.files[0]);
　　} else {
　　　　prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + 
file.value + '\'"></div>';
　　}
}

3,application.properties中的配置上傳的限制

#配置文件傳輸
spring.servlet.multipart.enabled=true 
spring.servlet.multipart.file-size-threshold=0
#單個數據的大小
spring.servlet.multipart.maxFileSize=100MB
#總數據的大小
spring.servlet.multipart.maxRequestSize=100MB

4,controller(這里就不演示無file的情況,因為只是接受參數很簡單):

/**
* 有file文件時
* @param movieDto 封裝了需要傳遞過來的參數
* @param file 圖片file
*/
@RequestMapping("/editMovieInfo")
@ResponseBody
public String editMovieInfo(@RequestParam("id")final int id,@RequestParam("file")MultipartFile file) {
　　 int result = btShareService.editMovieInfo(id,file,uploadDir);
　　 if (result > -1) {
 　　 return JSON.toJSONString("true");
　　 } else {
 　　 return JSON.toJSONString("false");
　 }
}

5,service層處理:

@Transactional
@Override
public int editMovieInfo(int id, MultipartFile file,String uploadDir) {
 try {
　　　　　// 圖片路徑
  String imgUrl = null;
　　　　　//上傳
  String filename = upload(file, uploadDir, file.getOriginalFilename());
  if (!EmptyUtil.isEmpty(filename)) {
   imgUrl = new File(uploadDir).getName() + "/" + filename;
  }
  MovieInfo movie = movieInfoService.selectMovieInfoByDcpId(Integer.valueOf(movieDto.getId()));
　　　　　movie .setImgUrl(imgUrl)
  movieInfoService.updateMovieInfoByDcpId(movieInfo);
　　　　　 return 0;
 } catch (Exception e) {
　　  e.printStackTrace();
　　　　　return -1;
　　 }
}

圖片上傳的方法

public String upload(MultipartFile file, String path, String fileName) throws Exception {
　　// 生成新的文件名
　　String realPath = path + "/" + UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.lastIndexOf("."));
　　File dest = new File(realPath);
　　// 判斷文件父目錄是否存在
　　if (!dest.getParentFile().exists()) {
　　　　dest.getParentFile().mkdir();
　　}
　　// 保存文件
　　file.transferTo(dest);
　　return dest.getName();
}

6,至于Dao層的操作和數據庫修改這里就直接省略了....

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對創新互聯的支持。

文章標題：java實現圖片的上傳與展示實例代碼
瀏覽路徑：http://m.newbst.com/article14/jhecge.html

成都網站建設公司_創新互聯，為您提供服務器托管、網站收錄、、定制開發、品牌網站設計、靜態網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

java實現圖片的上傳與展示實例代碼