layui上傳圖片到服務(wù)器的非項目目錄下的方法
1、layui沒辦法與form表單中的其他字段一同提交到后臺,所以只能通過先提交圖片,然后通過返回的圖片的值來提交到數(shù)據(jù)庫
2、先將所需要的jar包導(dǎo)入,我是用的maven所以,需要在父pom.xml文件中添加下面兩個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、然后編寫前臺頁面
如果只需要上傳一張圖片可以看上傳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的目的是為了可以接收返回值,從而在提交時可以將圖片信息上傳到后臺
<script type="text/javascript"> //上傳logo layui.use('upload', function(){ var $ = layui.jquery, upload = layui.upload; //選完文件后不自動上傳 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(); //將每次選擇的文件追加到文件隊列 //layer.load(); console.log(obj) //預(yù)讀本地文件示例,不支持ie8 obj.preview(function(index, file, result){ fileCount++; if(fileCount>maxFileCount){ fileCount = maxFileCount; layer.msg('文件數(shù)量不得超過'+maxFileCount+'個',{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、因為layui在上傳多張圖片的時候是通過多次請求傳遞過去,所以是數(shù)據(jù)是一條一條的接收的,如果你需要回顯,那么就需要在后臺進行拼接,不拼接很可能會出現(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("給一個失敗的圖片路徑"); 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ù)器的非項目目錄下的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
根據(jù)新界面的要求,需要一部分圖片來增強日期控件的美觀性??紤]到既要實現(xiàn)加載圖表的目標(biāo),又要保持控件的獨立性以便將來的移植。2010-09-09JS對象轉(zhuǎn)換為Jquery對象實現(xiàn)代碼
很多新手朋友們都不知道js對象如何轉(zhuǎn)換為jquery對象,其實很簡單,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12javascript類型系統(tǒng) Window對象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類型系統(tǒng)之Window對象,整理關(guān)于Window對象的學(xué)習(xí)筆記,感興趣的小伙伴們可以參考一下2016-01-01javascript中全局對象的parseInt()方法使用介紹
全局對象的parseInt()方法該如何使用,下面為大家詳細介紹下,感興趣的朋友不要錯過2013-12-12