layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法
1、layui沒辦法與form表單中的其他字段一同提交到后臺(tái),所以只能通過先提交圖片,然后通過返回的圖片的值來提交到數(shù)據(jù)庫
2、先將所需要的jar包導(dǎo)入,我是用的maven所以,需要在父pom.xml文件中添加下面兩個(gè)jar包(版本自己選擇)
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency>
3、然后編寫前臺(tái)頁面
如果只需要上傳一張圖片可以看上傳logo的步驟,多張的話可以看上傳圖片的步驟
<div> <label class="layui-form-label">logo</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadLogo"> <i class="layui-icon"></i>選擇logo </button> <div class="layui-upload-list"> <!-- 為了回顯 --> <img class="layui-upload-img" id="upload-logo" width="150px" src="${educationalType.edLogo}"> </div> <button type="button" class="layui-btn" id="submit_logo">開始上傳 </button> <input id="logoText" name="edLogo" type="hidden" /> </div> </div> <div> <label class="layui-form-label">圖片</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadImage"> <i class="layui-icon"></i>選擇圖片 </button> <div class="layui-upload-list" id="imageView"> <c:if test="${pageFlag == 'updatePage' and educationalType.edImage1 != null}"> <img class="layui-upload-img" id="upload-image1" width="150px" src="${educationalType.edImage1}" > </c:if> <c:if test="${pageFlag == 'updatePage' and educationalType.edImage2 != null}"> <img class="layui-upload-img" id="upload-image2" width="150px" src="${educationalType.edImage2}"> </c:if> </div> <button type="button" class="layui-btn" id="submit_image">開始上傳</button> <input id="imageText" name="edImage" type="hidden" /> </div> </div>
上圖中input和img的目的是為了可以接收返回值,從而在提交時(shí)可以將圖片信息上傳到后臺(tái)
<script type="text/javascript"> //上傳logo layui.use('upload', function(){ var $ = layui.jquery, upload = layui.upload; //選完文件后不自動(dòng)上傳 upload.render({ elem: '#uploadLogo', url: '${ctx}/upload/uploadLogoToServer.do', auto: false, //multiple: true, choose: function(obj){ console.log(obj) //預(yù)讀本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#upload-logo').attr('src', result); //圖片鏈接(base64) $("#img_url").attr('value',result); }); }, bindAction: '#submit_logo', done: function(res){ $("#logoText").attr('value',res.url); console.log(res) return layer.msg(res.msg,{icon: res.status,time: 2000}); } }); //上傳圖片 var fileCount = 0;//控制文件數(shù)量 var maxFileCount = 2;//文件上傳最大數(shù)量,如果沒有限制上傳文件的數(shù)量則不需要 var maxFileSize = 20;//文件上傳最大大小 var resultValue = 0; var url = ""; upload.render({ elem: '#uploadImage', url: '${ctx}/upload/uploadImageToServer.do', auto: false, //multiple: true, choose: function(obj){ var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊(duì)列 //layer.load(); console.log(obj) //預(yù)讀本地文件示例,不支持ie8 obj.preview(function(index, file, result){ fileCount++; if(fileCount>maxFileCount){ fileCount = maxFileCount; layer.msg('文件數(shù)量不得超過'+maxFileCount+'個(gè)',{icon:2}); return; } //在當(dāng)前ID為“imageView”的區(qū)域顯示圖片 $('#imageView').append('<img name = "edImage" ' + 'style="width: 150px; margin-left: 8px;" ' + 'src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">') }); }, bindAction: '#submit_image', done: function(res){ if(resultValue < 2){ url = url + res.url + ","; } if(resultValue == 1){ $("#imageText").attr('value',url); } resultValue++; console.log(res) return layer.msg(res.msg,{icon: res.status,time: 2000}); } }); }); </script>
4、因?yàn)閘ayui在上傳多張圖片的時(shí)候是通過多次請(qǐng)求傳遞過去,所以是數(shù)據(jù)是一條一條的接收的,如果你需要回顯,那么就需要在后臺(tái)進(jìn)行拼接,不拼接很可能會(huì)出現(xiàn)只傳返回一張圖片的信息
UploadCollect
@RequestMapping(value = "/uploadImageToServer.do") @ResponseBody public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception { ResultMsg msg = new ResultMsg(); String url = ""; for (int i=0,length = files.length; i < length; i++) { if(files[i] != null && !files[i].isEmpty()) { //獲取路徑,路徑我寫的是固定路徑,直接映射到服務(wù)器根目錄下的/usr/Images/logo String upload_path = IMAGE_ROOT_URL; String upload_fileName = FileUpload.uploadFile(files[i], upload_path); msg.setStatus(0); url = url + upload_fileName; }else { msg.setStatus(1); msg.setMsg("上傳失敗"); msg.setUrl("給一個(gè)失敗的圖片路徑"); return msg; } } msg.setStatus(1); msg.setMsg("上傳成功"); msg.setUrl(url); return msg; }
FileUpload
public static String uploadFile(MultipartFile multipartFile, String path) throws Exception { File file = new File(path); if (!file.exists()) { file.mkdirs(); } FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream(); String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename(); BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName)); byte[] bs = new byte[1024]; int len; while ((len = fileInputStream.read(bs)) != -1) { bos.write(bs, 0, len); } bos.flush(); bos.close(); return fileName; }
5、這就是圖片上傳的步驟
以上這篇layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
根據(jù)新界面的要求,需要一部分圖片來增強(qiáng)日期控件的美觀性??紤]到既要實(shí)現(xiàn)加載圖表的目標(biāo),又要保持控件的獨(dú)立性以便將來的移植。2010-09-09JS對(duì)象轉(zhuǎn)換為Jquery對(duì)象實(shí)現(xiàn)代碼
很多新手朋友們都不知道js對(duì)象如何轉(zhuǎn)換為jquery對(duì)象,其實(shí)很簡(jiǎn)單,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-12-12javascript類型系統(tǒng) Window對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類型系統(tǒng)之Window對(duì)象,整理關(guān)于Window對(duì)象的學(xué)習(xí)筆記,感興趣的小伙伴們可以參考一下2016-01-01javascript中全局對(duì)象的parseInt()方法使用介紹
全局對(duì)象的parseInt()方法該如何使用,下面為大家詳細(xì)介紹下,感興趣的朋友不要錯(cuò)過2013-12-12JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09兩個(gè)listbox實(shí)現(xiàn)選項(xiàng)的添加刪除和搜索
listbox竟然可以實(shí)現(xiàn)選項(xiàng)的添加刪除和搜索不可思議吧,至于采用什么樣的方法實(shí)現(xiàn)的,具體代碼祥看本文嘍,或許可以幫助到你2013-03-03