若依 文件上傳的簡單實現包括文件上傳下載刪除回顯（不用敲一行代碼,也可改造到其他項目中）

一、效果演示gif

二、使用方式

2.1 引入upload-lxz.js

將js文件拷貝至js文件目錄下

在include.html中定義一個模版並在界面中引用該模版（直接像普通的js文件一樣引入也可）


upload-lxz.js文件內容如下,也可通過百度網盤下載
（鏈接：upload-lxz.js 提取碼：zcu1）

//文件顯示
$(function(){
	reflashFile();
})
//手動動刷新文件
function reflashFile(){
	$(".truefilePath").each(function (i, n) {
		var path=$(this).val();
		var linkElem=$(this).parent().find(".link");
		var that=this;
		if(path!=undefined&&path!=""){
			var delBtnElem=$(this).parent().find(".delBtn");
			$(linkElem).attr("href",path);
			var text=path;
			text=text.substring(text.lastIndexOf("/")+1);
			$(linkElem).html(text);
			$(delBtnElem).click(function(){
				$.modal.confirm("確認刪除嗎", function() {
				 	$.post("/common/delete",{fileName:path},function(data){
				 		reloadAll(that);
				 	})
				});
			});
			$(this).parent().find(".controlDiv").removeClass("hide");
		}else{
			reloadAll(that);
		}
	})
}
//重載上傳事件和樣式
function reloadAll(that){
	$(that).val("");
	var inputOutElem=$(that).parent().find(".inputOut");
	$(inputOutElem).html('<input class="form-control fileInput" type="file" onChange="uploadFile(this)" >');
	var linkElem=$(that).parent().find(".link");
	$(linkElem).attr("href","javascript:void(0)");
	$(linkElem).empty();
	var controlElem=$(that).parent().find(".controlDiv");
	$(controlElem).addClass("hide");
}
//文件上傳事件
function uploadFile(that) {
	var uploadDivElem=$(that).parents(".uploadDiv");
	var formData = new FormData();
	var file0=$(uploadDivElem).find(".fileInput")[0].files[0];
	if ( file0==null) {
		$.modal.alertWarning("請先選擇文件路徑");
		return false;
	}
	formData.append('file',file0);
	$.modal.loading("正在上傳，請稍後...");
	$.ajax({
		url: "/common/upload",
		type: 'post',
		cache: false,
		data: formData,
		processData: false,
		contentType: false,
		dataType: "json",
		success: function(result) {
			var truefilePathElem=$(uploadDivElem).find(".truefilePath");
			if(!!result.fileName){
				var controlElem=$(uploadDivElem).find(".controlDiv");
				var delBtnElem=$(uploadDivElem).find(".delBtn");
				var linkElem=$(uploadDivElem).find(".link");
				var fileInputElem=$(uploadDivElem).find(".fileInput");
				var inputOutElem=$(uploadDivElem).find(".inputOut");
				$(controlElem).removeClass("hide");
				$(inputOutElem).html('<input class="form-control fileInput" type="file" onChange="uploadFile(this)" >');
				$(delBtnElem).click(function(){
					$.modal.confirm("確認刪除嗎", function() {
					 	$.post("/common/delete",{fileName:result.fileName},function(data){
					 		reloadAll(truefilePathElem);
					 	})
					});
				});
				$(linkElem).attr("href",result.fileName);
				var text=result.fileName;
				text=text.substring(text.lastIndexOf("/")+1);
				$(linkElem).html(text);
				$(truefilePathElem).val(result.fileName);
				$.modal.closeLoading();
				$.modal.msgSuccess("上傳成功!");
			}else{
				$.modal.closeLoading();
				$.modal.msgError("上傳失敗！");
				reloadAll(truefilePathElem);
			}
		}
	});
}
//顯示格式控制
function formatterUrl(value){
	if(value!=undefined&&value!=null&&value!=''){
		var text=value;
		text=text.substring(text.lastIndexOf("/")+1);
		return '<a href="javascript:void(0);" onClick="$.modal.openTab(\''+text+'\',\''+value+'\');" class="link">'+text+'</a>';
	}else{
		return value;
	}
}

2.2 拷貝html代碼到界面需要位置

  其中th:field="*{annex}"是Thymeleaf相關的語法，傳入的是後臺保存的文件的url（例如我這裏傳入的是“/profile/upload/2020/05/10/ec52b1c17fe3e4c8603e5bd5d12169a4.jpg”），js代碼會自動將文件處理成文件名+後綴名並顯示成一個a鏈接 實際上的文件全路徑會被隱藏起來，主要是編輯功能需要回顯時使用，添加功能時不需要可以去掉該屬性；
  name="annex"屬性是後臺表單需要的字段的名稱根據需要修改，其他地方無需任何改動
  代碼內容如下：

<div id="uploadDiv1" class="uploadDiv" >
	<input name="annex" class="form-control hide truefilePath" type="text" th:field="*{annex}" >
	<div class="controlDiv hide">
		<a href="javascript:void(0);" target="_blank" class="link"></a>
		<a class="btn btn-xs delBtn" href="javascript:void(0)" >
			<i class="fa fa-remove"></i>
		</a>
	</div>
	<div class="inputOut">
		<input class="form-control fileInput" type="file" onChange="uploadFile(this)" >
	</div>
  </div>

三、 補充（注意）

  上圖第一個紅框中的路徑是文件上傳路徑，用的是若依框架已經實現的路由，可以直接使用
第二個紅框中的路由是文件刪除路由，是我自己實現的，不需要的同學可以將第二個紅框中的代碼註釋掉也無需看下面的步驟了。如果需要文件刪除功能的童鞋可以在後臺用下方的代碼實現.
1.配置刪除控制器

/*
* 通用文件刪除請求
*/
 @PostMapping("common/delete")
 @ResponseBody
 public AjaxResult fileDelete(String fileName)
 {
     try
     {
         FileUtils.deleteFileByVirtualPath(fileName);
         return AjaxResult.success();
     }
     catch (Exception e)
     {
     	 String msg="刪除失敗";
         log.error(msg, e);
         return AjaxResult.error(msg);
     }
 }

2.刪除方法實現

/**
 * 根據虛擬路徑刪除文件
 * @param fileName
 */
public static void deleteFileByVirtualPath(String fileName) {
	String newFileName = fileName.replace("/profile/upload", "");
    String leftPath = Global.getUploadPath();
    String realFileName = leftPath+newFileName;
    deleteFile(realFileName);
}
 /**
 * 刪除文件
 * 
 * @param filePath 文件
 * @return
 */
public static boolean deleteFile(String filePath)
{
    boolean flag = false;
    File file = new File(filePath);
    // 路徑爲文件且不爲空則進行刪除
    if (file.isFile() && file.exists())
    {
        file.delete();
        flag = true;
    }
    return flag;
}

更多技術問題請加入QQ羣(羣號1042665377)一起交流吧：