WebUploader-----大檔案列表上傳
阿新 • • 發佈：2018-11-11
大家好 在這裡 給大家介紹一下款適用於大檔案傳輸的外掛--------------------WebUploader
首先呢 我先給出該外掛需要的引數文件 官網地址:http://fex.baidu.com/webuploader/
下面是我寫的一個簡單的使用WebUploader的demo 水平有限 哈哈!
給出原始碼:前臺HTML佈局以及JS程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style> #fileTable { width:900px; border:1px solid #744e4e; } #fileTable thead tr td { border:1px solid #744e4e; } #fileTable tbody tr td{ border:1px solid #744e4e; } .progress { width:400px; } .progress_div { height:20px; width:400px; background-color:#d1bfbf; } .progress_chiren { height:20px; width:0px; background-color:#a6f895; } .manager_tool { width:150px; } .txt_jindu { float:left; margin-left:170px; } </style> <script src="Scripts/jquery-1.10.2.js"></script>//注意 一定要引入版本較高的Jquery <link href="Content/webuploader-0.1.5(2)/webuploader.css" rel="stylesheet" />//這是資源Css路徑,引入自己的就行了 <script src="Content/webuploader-0.1.5(2)/webuploader.js"></script>//Js路徑 </head> <body> <table id="fileTable"> <thead> <tr> <td> 檔名 </td> <td> 檔案大小 </td> <td> 狀態 </td> <td class="progress"> 進度 </td> </tr> </thead> <tbody id="demoList"> </tbody> </table> <div id="uploader" class="wu-example" style="float:left;"> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">選擇檔案</div> <button id="ctlBtn" >開始上傳</button> </div> </div> <script> $(function () { uploader = WebUploader.create( { swf: 'Content/webuploader-0.1.5(2)/Uploader.swf',//注意路徑 server: '/Home/Upload_File/',//檔案接收伺服器埠 pick: '#picker',//上傳按鈕 resize: false, method: 'post', chunked: true,//是否分片上傳 //formData: { "code": "Add", "numberStr": ss },//上傳引數 chunkRetry: 2,//重傳次數 threads: 5,//允許幾個檔案同時長傳 fileNumLimit: 10,//允許檔案上傳數量 duplicate: true,//是否允許檔案重複 chunkSize: 214748364800,//每一片的大小 }); //當檔案被加入佇列以後觸發。 uploader.on('fileQueued', function (file) { var filesize = FileSize(file.size); var strHtml = '<tr id=' + file.id + '><td>' + file.name + '</td><td>' + filesize + '</td><td><span class="gray:">等待上傳</span></td><td><div class="progress_div"><span class="txt_jindu">0%</span><div class="progress_chiren"></div></div></td></tr>'; $("#demoList").append(strHtml); }); //上傳過程中觸發，攜帶上傳進度。 uploader.on('uploadProgress', function (file, percentage) { var state = "正在上傳"; var per = percentage * 100; per = Math.round(per * 100) / 100;//計算百分比 $("#" + file.id).children().eq(3).children().eq(0).children().eq(0).html(per + '%');//賦值百分比 $("#" + file.id).children().eq(3).children().eq(0).children().eq(1).css("width", per + '%');//動態改變進度條寬度 if (per < 100) { state = "上傳中"; $("#" + file.id).children().eq(2).css("color", "red"); } $("#" + file.id).children().eq(2).html(state);//改變狀態 }); // 當檔案上傳失敗時觸發。 uploader.on('uploadError', function (file) { $("#" + file.id).children().eq(2).css("color", "red"); $("#" + file.id).children().eq(2).html("上傳失敗");//改變狀態 }); // 當檔案上傳成功時觸發。 uploader.on('uploadSuccess', function (file) { $("#" + file.id).children().eq(2).css("color", "green"); $("#" + file.id).children().eq(2).html("上傳成功");//改變狀態 }); //上傳按鈕 $('#ctlBtn').on('click', function () { uploader.upload(); }); }); //計算檔案大小 function FileSize(filesize) { var fileSize = 0; if (filesize > 1024 * 1024) { fileSize = (Math.round(filesize * 100 / (1024 * 1024)) / 100).toString() + 'MB'; } else { fileSize = (Math.round(filesize * 100 / 1024) / 100).toString() + 'KB'; } return fileSize; } </script> </body> </html>
後臺使用.netMVC做的 檔案接收服務介面
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; namespace PrcticeDemo.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } public void Upload_File() { try { System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; if (files.Count == 0) { } for (int i = 0; i < files.AllKeys.Count(); i++) { 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/Temp/" + fileName; var path = Server.MapPath(filePath); postedfile.SaveAs(path); } } } catch (Exception ex) { string error = ex.Message; } } } }
若是使用.net的朋友呢 一定要注意Web配置檔案,因為IIS會限制檔案上傳的大小或者請求的速度
我們需要對配置文件進行簡單的配置
首先:在 <system.webServer> </system.webServer>節點中加入
<security> <requestFiltering> <requestLimits maxAllowedContentLength="2072576000" /> </requestFiltering> </security>
其次:在 <system.web></system.web>節點下加入
<httpRuntime targetFramework="4.5.2" executionTimeout="90" maxRequestLength="2097151" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />原始碼連結:https://download.csdn.net/download/bigbossc/10585774
好了 我的分享到此結束了.
碼字不易 點個關注唄!