您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在ASP.NET MVC中使用Webuploader實(shí)現(xiàn)上傳功能,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
1.簡介:WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主,F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢,同時(shí)又不摒棄主流IE瀏覽器,沿用原來的FLASH運(yùn)行時(shí),兼容IE6+,iOS 6+, android 4+。兩套運(yùn)行時(shí),同樣的調(diào)用方式,可供用戶任意選用。
2.引入資源:使用Web Uploader文件上傳需要引入三種資源:JS, CSS, SWF。
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夾/webuploader.js"></script> <!--SWF在初始化的時(shí)候指定,在后面將展示-->
3.HTML部分
<div id="uploader" class="wu-example"> <!--用來存放文件信息--> <ul id="thelist" class="list-group"></ul> <div class="uploader-list"></div> <div class="btns"> <div id="picker" >選擇文件</div> <input id="ctlBtn" type="button" value="開始上傳" class="btn btn-default" /> </div> </div>
4.JS部分
//初始化上傳控件 function initUpload() { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 選完文件后,是否自動(dòng)上傳。 auto: false, // swf文件路徑 swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf', // 文件接收服務(wù)端。 server: applicationPath + 'PublicInfoManage/Upload/Upload', // 選擇文件的按鈕??蛇x。 // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建,可能是input元素,也可能是flash. pick: '#picker', chunked: true,//開始分片上傳 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定義參數(shù),待會(huì)兒解釋 }, // 不壓縮image, 默認(rèn)如果是jpeg,文件上傳前會(huì)壓縮一把再上傳! resize: false }); // 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候 uploader.on('fileQueued', function (file) { $list.append('<li id="' + file.id + '" class="list-group-item">' + '<span class="fileName" dataValue="">' + file.name + '</span>' + '<span class="state" style=\" margin-left: 10px;\">等待上傳</span>' + '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' + '<span class="download" ></span>' + '<span class="webuploadDelbtn"style=\"float: right;display: none; \">刪除<span>' + '</li>'); }); // 文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重復(fù)創(chuàng)建 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" >' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('span.state').text('上傳中'); $percent.css('width', percentage * 100 + '%'); }); // 文件上傳成功,給item添加成功class, 用樣式標(biāo)記上傳成功。 uploader.on('uploadSuccess', function (file, response) { var $li = $('#' + file.id); //$('#' + file.id).find('p.state').text('已上傳'); $.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) { $li.find('span.state').html("上傳成功"); $li.find('span.filepath').attr("dataValue", 1); $li.find('span.fileName').attr("dataValue", data.filename); $li.find('span.fileName').html(data.filename); $li.find('span.download').html("<a href=\"../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&fileName=" + data.filename + "\">下載</a>") $li.find('span.webuploadDelbtn').show(); $li.find('span.filepath').html(data.filepath); //增加列表存儲(chǔ) files.push(data); }); }); // 文件上傳失敗,顯示上傳出錯(cuò)。 uploader.on('uploadError', function (file, reason) { $('#' + file.id).find('p.state').text(reason); }); // 完成上傳完了,成功或者失敗,先刪除進(jìn)度條。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); //所有文件上傳完畢 uploader.on("uploadFinished", function () { //提交表單 }); //開始上傳 $("#ctlBtn").click(function () { uploader.upload(); }); //刪除 $list.on("click", ".webuploadDelbtn", function () { debugger var $ele = $(this); var id = $ele.parent().attr("id"); var file = uploader.getFile(id); uploader.removeFile(file); $ele.parent().remove(); //移除數(shù)組 var destFile = findFile(file.name) var index = files.indexOf(destFile); if (index > -1) { files.splice(index, 1); } }); }
5.C# Controller后臺(tái)處理
/// <summary> /// 上傳文件 /// </summary> /// <returns></returns> [HttpPost] public ActionResult Upload() { string fileName = Request["name"]; int lastIndex = fileName.LastIndexOf('.'); string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.')); fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", ""); int index = Convert.ToInt32(Request["chunk"]);//當(dāng)前分塊序號(hào) var guid = Request["guid"];//前端傳來的GUID號(hào) var dir = Server.MapPath("~/Upload/file");//文件上傳目錄 string currentTime = DateTime.Now.ToString("yyyy-MM-dd"); dir += "\\" + currentTime; dir = Path.Combine(dir, fileRelName);//臨時(shí)保存分塊的目錄 if (!System.IO.Directory.Exists(dir)) System.IO.Directory.CreateDirectory(dir); string filePath = Path.Combine(dir, index.ToString());//分塊文件名為索引名,更嚴(yán)謹(jǐn)一些可以加上是否存在的判斷,防止多線程時(shí)并發(fā)沖突 var data = Request.Files["file"];//表單中取得分塊文件 //if (data != null)//為null可能是暫停的那一瞬間 //{ data.SaveAs(filePath);//報(bào)錯(cuò) //} return Json(new { erron = 0 });//Demo,隨便返回了個(gè)值,請勿參考 }
上述就是小編為大家分享的怎么在ASP.NET MVC中使用Webuploader實(shí)現(xiàn)上傳功能了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。