.Net學(xué)習(xí)筆記之Layui多圖片上傳功能
前言:
多圖上傳在一些特殊的需求中我們經(jīng)常會遇到,其實多圖上傳的原理大家都有各自的見解。對于Layui多圖上傳和我之前所說的通過js獲取文本框中的文件數(shù)組遍歷提交的原理一樣,只不過是Layui中的upload.render方法已經(jīng)幫我們封裝好了,我們只管調(diào)用即可,也就是說你選中了幾張圖片,那么將會向后臺請求與圖片張數(shù)相同的次數(shù),即為遍歷提交的方式。
Layui文件/圖片樣式地址(官方文檔):https://www.layui.com/demo/upload.html
一、引入Layui.cs和Layui.js:
需要本地項目中存在layui相關(guān)樣式和js,非網(wǎng)絡(luò)地址
<link rel="stylesheet" rel="external nofollow" media="all">
<script src="http://res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
當(dāng)然假如你需要有彈框提示的話,你還需要引入Layer.js
二、前端代碼:
a.Html中的代碼:
<li> <h6>滾動圖片:</h6> <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">滾動圖片上傳【推薦上傳三張】</button> <button type="button" class="layui-btn layui-btn-danger" onclick="clearAll()"><i class="layui-icon"></i></button> <input type="hidden" name="ScrollingGraph" id="ScrollingGraph"/> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 預(yù)覽圖: <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> </li>
b.js中的代碼:
<script> layui.use('upload', function () { var $ = layui.jquery, upload = layui.upload; //多圖片上傳 upload.render({ elem: '#test2', url: '/FileUpload/FileLoad/', multiple: true,//允許選擇多張圖片 before: function (obj) { //預(yù)讀本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo2').append( '<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">'); }); }, done: function (res) { if (res.isSuccess == true) { layer.msg("上傳成功"); var scrollingGraph = $("#ScrollingGraph").val(); if (scrollingGraph == "") { $("#ScrollingGraph").val(res.path); } else { scrollingGraph += ',' + res.path; $("#ScrollingGraph").val(scrollingGraph); } console.log(scrollingGraph); } else { return layer.msg('上傳失敗'); } } }); }); //清空所有圖片 function clearAll() { layer.confirm("確定要全部清空嗎?", { icon: 3, btn: ["確定", "取消"], yes: function (index) { $("#demo2").html(""); $("#ScrollingGraph").val(""); layer.close(index); } }); } </script>
三、服務(wù)端接口圖片文件流,并保存:
1public class FileUploadController : Controller 2{ 3/// <summary> /// 對驗證和處理 HTML 窗體中的輸入數(shù)據(jù)所需的信息進(jìn)行封裝,如FromData拼接而成的文件 /// </summary> /// <param name="context">FemContext對驗證和處理html窗體中輸入的數(shù)據(jù)進(jìn)行封裝</param> /// <returns></returns> [HttpPost] public ActionResult FileLoad(FormContext context) { HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取二進(jìn)制圖片文件流 if (httpPostedFileBase != null) { try { ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8"); ControllerContext.HttpContext.Response.Charset = "UTF-8"; string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名稱 string fileExtension = Path.GetExtension(fileName);//文件擴(kuò)展名 byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流轉(zhuǎn)化為二進(jìn)制字節(jié) string result = SaveFile(fileExtension, fileData);//文件保存 if (string.IsNullOrEmpty(result)) { return Json(new { isSuccess = false, path = "",errorMsg= "上傳文件失敗"}); } return Json(new { isSuccess = true, path = result }); } catch (Exception ex) { return Json(new { isSuccess = false, path = "" }); } } else { return Json(new { isSuccess = false, path = "" }); } } /// <summary> /// 將文件流轉(zhuǎn)化為二進(jìn)制字節(jié) /// </summary> /// <param name="fileData">圖片文件流</param> /// <returns></returns> private byte[] ReadFileBytes(HttpPostedFileBase fileData) { byte[] data; using (Stream inputStream = fileData.InputStream) { MemoryStream memoryStream = inputStream as MemoryStream; if (memoryStream == null) { memoryStream = new MemoryStream(); inputStream.CopyTo(memoryStream); } data = memoryStream.ToArray(); } return data; } /// <summary> /// 保存文件 /// </summary> /// <param name="fileExtension">文件擴(kuò)展名</param> /// <param name="fileData">圖片二進(jìn)制文件信息</param> /// <returns></returns> private string SaveFile(string fileExtension, byte[] fileData) { string result; try { string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名稱 // 文件上傳后的保存路徑 string basePath = "UploadFile"; string saveDir = DateTime.Now.ToString("yyyy-MM-dd"); string savePath = System.IO.Path.Combine(saveDir, saveName); string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir); if (!System.IO.Directory.Exists(serverDir)) { System.IO.Directory.CreateDirectory(serverDir); } string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路徑 System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes創(chuàng)建一個新的文件,按照對應(yīng)的文件流寫入,假如已存在則覆蓋 //返回完整的圖片保存地址 result="/"+basePath + "/" + saveDir + "/" + saveName; } catch (Exception) { result = "發(fā)生錯誤"; } return result; } }
四、效果圖展示:
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對我們的支持。
欄 目:ASP.NET
下一篇:ASP.NET Core 實現(xiàn)自定義WebApi模型驗證實例講解
本文標(biāo)題:.Net學(xué)習(xí)筆記之Layui多圖片上傳功能
本文地址:http://mengdiqiu.com.cn/a1/ASP_NET/10896.html
您可能感興趣的文章
- 01-11如何給asp.net core寫個簡單的健康檢查
- 01-11淺析.Net Core中Json配置的自動更新
- 01-11.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件XRPC詳解
- 01-11.NET Core 遷移躺坑記續(xù)集之Win下莫名其妙的超時
- 01-11.NET開發(fā)人員關(guān)于ML.NET的入門學(xué)習(xí)
- 01-11docker部署Asp.net core應(yīng)用的完整步驟
- 01-11.net core webapi jwt 更為清爽的認(rèn)證詳解
- 01-11ASP.NET Core靜態(tài)文件的使用方法
- 01-11.NET Core 3.0之創(chuàng)建基于Consul的Configuration擴(kuò)展組件
- 01-11.net core EF Core調(diào)用存儲過程的方式


閱讀排行
本欄相關(guān)
- 01-11vscode extension插件開發(fā)詳解
- 01-11VsCode插件開發(fā)之插件初步通信的方法
- 01-11如何給asp.net core寫個簡單的健康檢查
- 01-11.net core高吞吐遠(yuǎn)程方法如何調(diào)用組件
- 01-11淺析.Net Core中Json配置的自動更新
- 01-11.NET開發(fā)人員關(guān)于ML.NET的入門學(xué)習(xí)
- 01-11.NET Core 遷移躺坑記續(xù)集之Win下莫名其
- 01-11.net core webapi jwt 更為清爽的認(rèn)證詳解
- 01-11docker部署Asp.net core應(yīng)用的完整步驟
- 01-11ASP.NET Core靜態(tài)文件的使用方法
隨機(jī)閱讀
- 04-02jquery與jsp,用jquery
- 01-10delphi制作wav文件的方法
- 01-10C#中split用法實例總結(jié)
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-11ajax實現(xiàn)頁面的局部加載
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10使用C語言求解撲克牌的順子及n個骰子