大家好，我是雄雄，歡迎關(guān)注公眾號【雄雄的小課堂】。

最近實(shí)在是忙的抽不開身，并且身上也出現(xiàn)了一堆的毛病，今天牙疼，明天脊椎疼，然后接著又頭疼……年紀(jì)輕輕的，咋這么多毛病呢？我也在堅(jiān)持鍛煉呢……

今天給大家分享的是如何利用layui實(shí)現(xiàn)圖片（文件）上傳呢？

Layui是一款前端ui框架，這個(gè)框架最大的特點(diǎn)就是簡單易學(xué)，我記得第一次用它的時(shí)候還在上學(xué)，就下載下來試了試，發(fā)現(xiàn)是真好用啊！

Layui里面所包含的組件，官方都已提供了代碼示例，包括我今天所分享的上傳文件以及圖片，下面是上傳圖片的前端源代碼：

<script>//文件上傳layui.use('upload', function(){var?$ = layui.jquery,upload = layui.upload;//普通圖片上傳var?uploadInst = upload.render({elem: '#test1',url: '/uploadFile'?//改成您自己的上傳接口,before: function(obj){//預(yù)讀本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //圖片鏈接（base64）});},done: function(res){//如果上傳失敗if(res.code > 0){layer.msg('上傳失敗');}//上傳成功layer.msg('上傳成功');//將圖片的名字放在表單中，添加的時(shí)候得放在數(shù)據(jù)庫里面$(function(){$("#fileName").val(res.msg);//alert('賦值成功');})},error: function(){//演示失敗狀態(tài)，并實(shí)現(xiàn)重傳var?demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});}); </script>

效果如圖所示：

點(diǎn)擊“商品圖片”，可在本地選擇圖片進(jìn)行上傳，效果如下：

點(diǎn)擊立即提交即可連同表單內(nèi)容一并插入至數(shù)據(jù)庫中。

前端就是直接拷貝官方代碼即可，需要注意的是layui的版本，一定要用最新版本，我用的是V2.5.7，第一次用的比這個(gè)版本小，是V2.1.5，就不可以。

前端好實(shí)現(xiàn)，不好實(shí)現(xiàn)的是后端，我們接下來看看控制器中是如何進(jìn)行操作的。

//圖片上傳@ResponseBody@RequestMapping("/uploadFile")public?JSON?uploadFile(MultipartFile file, HttpServletRequest request) {JSONObject json = new?JSONObject();//路徑String?filePath = System.getProperty("user.dir") + "/src/main/resources/static/images/";//上傳到這個(gè)文件夾File file1 = new?File(filePath);//如果沒有的話創(chuàng)建一個(gè)if?(!file1.exists()) {file1.mkdirs();}//路徑+文件名//文件名：file.getOriginalFilename()String?finalFilePath = filePath + file.getOriginalFilename().trim();File desFile = new?File(finalFilePath);if?(desFile.exists()) {desFile.delete();}try?{file.transferTo(desFile);json.put("code", 0);//將文件名放在msg中，前臺提交表單時(shí)需要用到j(luò)son.put("msg", file.getOriginalFilename().trim());JSONObject json2 = new?JSONObject();json2.put("src", finalFilePath);json2.put("title", "");json.put("Data", json2);} catch?(Exception e) {System.out.println(e.getMessage());json.put("code", 1);}System.out.println(json);return?json;}

相關(guān)代碼都進(jìn)行了注釋，然后就可以啦。

用到的json包是import com.alibaba.fastjson.JSON;在maven中可以添加如下依賴：

<!--json依賴--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.75</version></dependency>

往期精彩

哈哈哈哈哈哈！發(fā)現(xiàn)微信一個(gè)bug

2021-03-25

微信超級更新！電腦上也能刷朋友圈了！

2021-03-26

我一般在B站看這些破玩意...

2021-03-24

有哪些道理是我當(dāng)了程序員后才知道的？

2021-03-23

thymeleaf如何迭代遍歷，如何判斷

2021-03-22

點(diǎn)分享

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

以上是生活随笔為你收集整理的layui上传图片，前端直接拷代码，后端……的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。