多圖片上傳(文件上傳)

注意Servers配置中限制上傳大小

第一步：

HTML頁面引入layui 

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">
        選擇多文件        
    </button>
	<div class="layui-upload-list">
	    <table class="layui-table">
	        <thead>
	        <tr>
	            <th>文件名</th>
	            <th>大小</th>
	            <th>狀態</th>
	            <th>操作</th>
	        </tr>
	        </thead>
	        <tbody id="demoList"></tbody>
	    </table>
	</div>
	<!-- <button type="button" class="layui-btn" id="testListAction">開始上傳</button> -->
</div>

Ctrl+Shift+F格式化代碼(會與輸入法簡體/繁體快捷鍵沖突)

第二步：

js中監控Upload

layui.use(['layer', 'form', 'laydate', 'upload' ], function(exports) {});

在監控中編寫上傳js代碼

layui.use(['layer', 'form', 'laydate', 'upload' ], function(exports) {

var baseUpload = new Array();//聲明集合存放多個文件 layui.form.on('submit(form-submit)', function(data) { var formObj = data.form; var formData= data.field; formData['stiList'] = baseUpload;//表單提交的時候，把文件也提交過去 $.post(formObj.action, formData, function(result) { if(result.msg == 'OK') { //上傳成功 } else { layer.msg(result.msg);//上傳失敗 } }); return false; }); var url = "saveFile";//這里是上傳接口 var demoListView = $('#demoList'),uploadListIns = layui.upload.render({ elem: '#testList' //指向容器選擇器 ,url: url //服務端上傳接口 ,exts : 'jpg|png|jpeg' //限制上傳后綴 ,size : 0 //設置文件最大可允許上傳的大小，單位 KB。不支持ie8/9 ,multiple: true //是否允許多文件上傳 ,auto: false //是否選完文件后自動上傳 如果設定 false，那么需要設置 bindAction //參數來指向一個其它按鈕提交上傳 ,bindAction: '#testListAction' ,choose: function(obj){ //選擇文件后的回調函數 var files = this.files = obj.pushFile(); // 將每次選擇的文件追加到文件隊列 // 讀取本地文件 obj.preview(function(index, file, result){//result為base64(已去除,前內容) var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>等待上傳</td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">刪除</button>' ,'</td>' ,'</tr>'].join('')); var s = { name : file.name,//文件名稱 url : "",//存放上傳地址 picture : result //上傳base64 }; baseUpload.push(s);//放入集合中 // 單個重傳 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); // 刪除 tr.find('.demo-delete').on('click', function(){ delete files[index]; // 刪除對應的文件 baseUpload.splice(files[index],1);//刪除集合中 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; // 清空 input file 值， //以免刪除后出現同名文件不可選 }); demoListView.append(tr); }); } ,done: function(res, index, upload){//成功后回調函數 if(res.msg == "OK"){ // 上傳成功 var tr = demoListView.find('tr#upload-'+ index),tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html(''); // 清空操作 var filesrc = res.savePaths;//返回的地址 var filename = res.fileName;//返回的文件名 var s = {//鍵值對賦值 name : filename,//文件名 url : filesrc//地址路徑 /* ,picture : base64 */ //存儲base64 }; baseUpload.push(s);//放入集合中 return delete this.files[index]; // 刪除文件隊列已經上傳成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index),tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); // 顯示重傳 } });

}); 

第三步：

調用后台接口

spring-context.xml中引入bean

<!-- 上傳文件配置 -->
<!-- 配置MultipartResolver 用於文件上傳 使用spring的CommosMultipartResolver -->
<!--defaultEncoding：請求的編碼格式必須和用戶JSP的編碼一致，以便正確讀取表單中的內容。 
            uploadTempDir:文件上傳過程中的臨時目錄，上傳完成后，臨時文件會自動刪除 
            maxUploadSize:設置文件上傳大小上限（單位為字節） -->
<bean id="multipartResolver" 
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
        <property name="maxUploadSize" value="102400000" />
</bean>

控制器編寫接口:

@RequestMapping(value = "/saveFile3", method = RequestMethod.POST) public void saveFile3(MultipartFile file, Model model) throws IOException { String msg = "OK"; // 判斷文件是否存在 if (file == null || StringUtils.isEmpty(file.getOriginalFilename()) || 0 == file.getSize()) { model.addAttribute("msg", "請上傳文件！"); return; } // 獲取文件名 String fileName = ""; String saveName = ""; // 判斷文件夾是否存在， String uploadPath = ContextUtil.getRealPath() + uploadFilePath; File dir = new File(uploadPath); if (!dir.exists() || !dir.isDirectory()) { dir.mkdirs(); } if (file != null) { // 獲取文件名 fileName = file.getOriginalFilename(); saveName = getSaveName(fileName); // 文件上傳 File localFile = new File(uploadPath + "/" + saveName); file.transferTo(localFile); } // 結果 model.addAttribute("msg", msg); model.addAttribute("savePaths", saveName); model.addAttribute("fileName", fileName); }

本文實則為往數據庫中添加base64

后台有實體類集合接受傳輸過來的baseUpload集合變量

for(Map<String,Object> map : 實體類.get方法){ 實體類 對象 = new 實體類(); 對象.set字段(String.valueOf(map.get("name"))); stiVo.setPicture(String.valueOf(map.get("picture"))); stiVo.setUrl(String.valueOf(map.get("url"))); Service.add();//調用service添加方法 }

插入數據庫

第四步：

在HTML頁面展示

<div class="layui-fluid" style="overflow: hidden;"> <div class="layui-form-item"> <label class="layui-form-label">附件</label> <div class="layui-input-block" id="fujian"> </div> </div> </div>

當后台調用展示方法時,js判斷傳遞過來的這個實體類存放base64字段是否有值

if (data.listSti != null) {//數據庫查詢出實體類存放base64不為空時 $('#fujian').html(); var HTML = ""; $.each(data.listSti, function(i, item) {//循環放在變量中 var url = basePath + '/upload/' + item.url; var picture = item.picture;//base64 HTML += "<img class='layui-upload-img' src='"+picture+"' />&nbsp;&nbsp;";//直接利用瀏覽器自帶base64即可 }); $('#fujian').append(HTML);//放在頁面上 }