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

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

今天給大家分享的是如何利用layui實現圖片（文件）上傳呢？

Layui是一款前端ui框架，這個框架最大的特點就是簡單易學，我記得第一次用它的時候還在上學，就下載下來試了試，發現是真好用啊！

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

<script>//文件上傳layui.use('upload', function(){var?$ = layui.jquery,upload = layui.upload;//普通圖片上傳var?uploadInst = upload.render({elem: '#test1',url: '/uploadFile'?//改成您自己的上傳接口,before: function(obj){//預讀本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //圖片鏈接（base64）});},done: function(res){//如果上傳失敗if(res.code > 0){layer.msg('上傳失敗');}//上傳成功layer.msg('上傳成功');//將圖片的名字放在表單中，添加的時候得放在數據庫里面$(function(){$("#fileName").val(res.msg);//alert('賦值成功');})},error: function(){//演示失敗狀態，并實現重傳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>

效果如圖所示：

點擊“商品圖片”，可在本地選擇圖片進行上傳，效果如下：

點擊立即提交即可連同表單內容一并插入至數據庫中。

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

前端好實現，不好實現的是后端，我們接下來看看控制器中是如何進行操作的。

//圖片上傳@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/";//上傳到這個文件夾File file1 = new?File(filePath);//如果沒有的話創建一個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中，前臺提交表單時需要用到json.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;}

相關代碼都進行了注釋，然后就可以啦。

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

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

往期精彩

哈哈哈哈哈哈！發現微信一個bug

2021-03-25

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

2021-03-26

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

2021-03-24

有哪些道理是我當了程序員后才知道的？

2021-03-23

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

2021-03-22

點分享

點點贊

點在看

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。