前言
在很多的網站都可以實現上傳頭像，可以選擇自己喜歡的圖片做頭像，從本地上傳，下次登錄時可以直接顯示出已經上傳的頭像，那么這個是如何實現的呢？下面話不多說了，來一起看看詳細的介紹吧
一、注意事項:
1,該項目主要采用的是springboot+thymeleaf框架
2,代碼展示的為ajax完成圖片上傳(如果不用ajax只需要改變相應的form表單配置即可)
二、效果實現:
1,頁面效果:
2,文件夾路徑下就會多了對應的圖片:
三、代碼實現:
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層的操作和數據庫修改這里就直接省略了....
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
