重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊、服務(wù)器等服務(wù)
java實(shí)現(xiàn)圖片的上傳與展示實(shí)例代碼
前言
永新網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
在很多的網(wǎng)站都可以實(shí)現(xiàn)上傳頭像，可以選擇自己喜歡的圖片做頭像，從本地上傳，下次登錄時(shí)可以直接顯示出已經(jīng)上傳的頭像，那么這個(gè)是如何實(shí)現(xiàn)的呢？下面話不多說了，來一起看看詳細(xì)的介紹吧
一、注意事項(xiàng):
1,該項(xiàng)目主要采用的是springboot+thymeleaf框架
2,代碼展示的為ajax完成圖片上傳(如果不用ajax只需要改變相應(yīng)的form表單配置即可)
二、效果實(shí)現(xiàn):
1,頁面效果:
2,文件夾路徑下就會(huì)多了對應(yīng)的圖片:
三、代碼實(shí)現(xiàn):
1,在html文本中編輯為(采用thymeleaf框架):
2,編輯js代碼:
兩種情況:1,有file中有值的時(shí)候提交;2,file文件中沒有值的時(shí)候提交
function submitForm(pageIndex, pageSize) {
var formData = new FormData(); //將需要提交的參數(shù)封裝起來
formData.append("id", $("#id").val());
var zswb = $("#file").val(); //獲取file中的內(nèi)容,看是否有值
if (zswb == '' || zswb.length < 1) { //沒有file提交的時(shí)候走的接口
$.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提交的時(shí)候走的接口
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 = '
';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '';
}
}3,application.properties中的配置上傳的限制
#配置文件傳輸 spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=0 #單個(gè)數(shù)據(jù)的大小 spring.servlet.multipart.maxFileSize=100MB #總數(shù)據(jù)的大小 spring.servlet.multipart.maxRequestSize=100MB
4,controller(這里就不演示無file的情況,因?yàn)橹皇墙邮軈?shù)很簡單):
/**
* 有file文件時(shí)
* @param movieDto 封裝了需要傳遞過來的參數(shù)
* @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層的操作和數(shù)據(jù)庫修改這里就直接省略了....
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。
分享標(biāo)題：java實(shí)現(xiàn)圖片的上傳與展示實(shí)例代碼
文章路徑：http://www.xueling.net.cn/article/jhecge.html