前端外掛-LayUI-----多圖片上傳
阿新 • • 發佈：2018-11-11
效果預覽
引數列表
前臺程式碼
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>layui---多檔案上傳demo</title> @*匯入layui css樣式 注意檔案資源路徑*@ <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> </head> <body> <div> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多檔案</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>檔名</th> <th>大小</th> <th>狀態</th> <th>操作</th> </tr> </thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="testListAction">開始上傳</button> </div> </div> @*引入layui js 注意檔案資源路徑 改為自己的*@ <script src="~/Content/layui/layui.js"></script> <script> //構建初始化器 layui.use('upload', function() { var $ = layui.jquery ,upload = layui.upload; //多檔案列表示例 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#testList'//節點選擇器 , url: '/DataRead/UpImgs'//檔案上傳介面 ,accept: 'file'//選擇型別 ,multiple: true ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列 //讀取本地檔案 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' ,'<td>等待上傳</td>' ,'<td>' ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重傳</button>' ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">刪除</button>' ,'</td>' ,'</tr>'].join('')); //單個重傳 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //刪除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //刪除對應的檔案 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除後出現同名檔案不可選 }); demoListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上傳成功 var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //刪除檔案佇列已經上傳成功的檔案 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳 } }); }); </script> </body> </html>
後臺程式碼
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Aspose.Cells; using System.Data; using QXKJMap.Models; using QXKJMap.Content.Public; using System.Web.Script.Serialization; using System.IO; using System.Collections; using System.Text.RegularExpressions; using System.Runtime.Serialization.Json; using System.Text; using SharpCompress.Archive; using SharpCompress.Common; namespace QXKJMap.Controllers { public class DataReadController : Controller { public ActionResult txt() { return View(); } /// <summary> /// 檔案上傳 /// </summary> /// <returns>res 返回結果 res=0上傳成功 否則失敗</returns> public string UpImgs() { string res = "{\"code\":1}"; try { System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; if (files.Count == 0) { res = "{\"code\":1}"; } for (int i = 0; i < files.AllKeys.Count(); i++) { if (files.AllKeys[i] != "img") { if (files[i].FileName.Length > 0) { System.Web.HttpPostedFile postedfile = files[i]; string filePath = ""; var ext = Path.GetExtension(postedfile.FileName); var fileName = DateTime.Now.Ticks.ToString() + ext; // 組合檔案儲存的相對路徑 filePath = "/Content/Upload/TypeLogo/" + fileName; // 將相對路徑轉換成物理路徑 var path = Server.MapPath(filePath); postedfile.SaveAs(path); res = "{\"code\":0}"; } } } } catch (Exception) { throw; } return res; } } }
碼字不易 點個贊 關注一下唄 謝謝 ！
未完待續......................