ASP.NET文件上傳控件Uploadify的使用方法
對(duì)于文件上傳來(lái)說(shuō),有很多種實(shí)現(xiàn)方式,如傳統(tǒng)的表單方式,現(xiàn)在流行的flash方式,甚至還有純JS方式,之所以有這些方式來(lái)實(shí)現(xiàn)文件上傳,我想主要原因是因?yàn)?傳統(tǒng)的上傳對(duì)于大文件支持不夠,因?yàn)樗菃尉€程同步機(jī)制,當(dāng)大文件通過(guò)HTTP方式發(fā)送到服務(wù)端時(shí),對(duì)于服務(wù)端站點(diǎn)的主線程影響比較大,會(huì)產(chǎn)生阻塞,所以,現(xiàn)在很多上傳控制都是異步,多線程的方式去實(shí)現(xiàn)的.
今天來(lái)介紹一個(gè)文件上傳控制,它就是Uploadify,它應(yīng)該是flash的異步上傳工具,對(duì)于大文件支持還不錯(cuò),所以,我選擇了它.
相關(guān)API介紹
uploader : uploadify.swf 文件的相對(duì)路徑,該swf文件是一個(gè)帶有文字BROWSE的按鈕,點(diǎn)擊后淡出打開(kāi)文件對(duì)話框,默認(rèn)值:uploadify.swf。
script : 后臺(tái)處理程序的相對(duì)路徑 。默認(rèn)值:uploadify.php
checkScript :用來(lái)判斷上傳選擇的文件在服務(wù)器是否存在的后臺(tái)處理程序的相對(duì)路徑
fileDataName :設(shè)置一個(gè)名字,在服務(wù)器處理程序中根據(jù)該名字來(lái)取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata
method : 提交方式Post 或Get 默認(rèn)為Post
scriptAccess :flash腳本文件的訪問(wèn)模式,如果在本地測(cè)試設(shè)置為always,默認(rèn)值:sameDomain
folder : 上傳文件存放的目錄 。
queueID : 文件隊(duì)列的ID,該ID與存放文件隊(duì)列的div的ID一致。
queueSizeLimit : 當(dāng)允許多文件生成時(shí),設(shè)置選擇文件的個(gè)數(shù),默認(rèn)值:999 。
multi : 設(shè)置為true時(shí)可以上傳多個(gè)文件。
auto : 設(shè)置為true當(dāng)選擇文件后就直接上傳了,為false需要點(diǎn)擊上傳按鈕才上傳 。
fileExt : 設(shè)置可以選擇的文件的類型,格式如:'*.jpg;*.gif,*.png' 。
fileDesc : 這個(gè)屬性值必須設(shè)置fileExt屬性后才有效,用來(lái)設(shè)置選擇文件對(duì)話框中的提示文本,如設(shè)置fileDesc為“請(qǐng)選擇圖像文件”,
sizeLimit : 上傳文件的大小限制 。
simUploadLimit : 允許同時(shí)上傳的個(gè)數(shù) 默認(rèn)值:1 。
buttonText : 瀏覽按鈕的文本,默認(rèn)值:BROWSE 。
buttonImg : 瀏覽按鈕的圖片的路徑 。
hideButton : 設(shè)置為true則隱藏瀏覽按鈕的圖片 。
rollover : 值為true和false,設(shè)置為true時(shí)當(dāng)鼠標(biāo)移到瀏覽按鈕上時(shí)有反轉(zhuǎn)效果。
width : 設(shè)置瀏覽按鈕的寬度 ,默認(rèn)值:110。
height : 設(shè)置瀏覽按鈕的高度 ,默認(rèn)值:30。
wmode : 設(shè)置該項(xiàng)為transparent 可以使瀏覽按鈕的flash背景文件透明,并且flash文件會(huì)被置為頁(yè)面的最高層。 默認(rèn)值:opaque 。
cancelImg :選擇文件到文件隊(duì)列中后的每一個(gè)文件上的關(guān)閉按鈕圖標(biāo)
結(jié)構(gòu)圖
HTML代碼
<div> <div class="inputDiv fl"> <input type="text" name="ImagePath" id="ImagePath" style="width: 600px;"> <img style="display: none;" /> </div> <div class="fl" style="position: relative;"> <input id="custom_file_uploadEdu" type="file" class="btn" /> <a href="javascript:$('#custom_file_uploadEdu').uploadifyUpload()">上傳</a>| <a href="javascript:$('#custom_file_uploadEdu').uploadifyClearQueue()">取消上傳</a> </div> <div id="displayMsg"></div> </div>
JS代碼
<script type="text/ecmascript"> $("#custom_file_uploadEdu").uploadify({ 'uploader': '/Scripts/Uploadify/uploadify.swf', 'script': '/ashx/UploadFile.ashx', 'cancelImg': '/Scripts/Uploadify/uploadify-cancel.png', 'folder': '/', 'queueSizeLimit': 1, 'simUploadLimit': 1, 'sizeLimit ': 1024 * 1024 * 5, 'multi': false, 'auto': false,/*如果是自動(dòng)上傳,那上傳按鈕將沒(méi)用了*/ 'fileExt': '*.jpg;*.gif;*.jpeg;*.mp4', 'fileDesc': '請(qǐng)選擇圖像或者視頻', 'queueID': 'fileQueue', 'width': 110, 'height': 30, 'buttonText': '選擇', 'wmode': 'opaque', 'hideButton': false, 'onSelect': function (event, ID, fileObj) { $("#displayMsg").html("上傳中......"); }, 'onComplete': function (event, queueId, fileObj, response, data) { var ary = response.split('|'); if (ary[0] == "0") { //提示錯(cuò)誤信息 alert(ary[1]); } else { if (ary[0]=="1") {//上傳后的URL $("#displayMsg").html("上傳成功") $("#ImagePath").attr("value", ary[1]); $("#ImagePath").remove("img").next("img").show().attr({ "style": "width:50px;height:50px;", "src": ary[1] }); } else {//異常信息 alert(ary[1]); } } } }); </script>
后臺(tái)處理程序(接收流,寫(xiě)入流)
namespace WebTest.ashx { /// <summary> /// UploadFile 的摘要說(shuō)明 /// </summary> public class UploadFile : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(new UploadImpl().Upload(context, UpLoadType.ProductImage, false)); } public bool IsReusable { get { return false; } } } }
UploadImpl類代碼
namespace EntityFrameworks.Application.Core.FileUpload { /// <summary> /// 圖像上傳功能的實(shí)現(xiàn) /// </summary> public class UploadImpl { public UploadImpl(IFileUploadSize fileUploadSize) { _fileUploadSize = fileUploadSize ?? new TestFileUploadSize(); } public UploadImpl() : this(null) { } #region Fields & Consts static string FileHostUri = System.Configuration.ConfigurationManager.AppSettings["FileHostUri"] ?? HttpContext.Current.Request.Url.Scheme + "://" + HttpContext.Current.Request.Url.Authority; Point point = new Point(0, 0); //圖像從那個(gè)坐標(biāo)點(diǎn)進(jìn)行截取 double wRate = 1, hRate = 1, setRate = 1; int newWidth = 0, newHeight = 0; IFileUploadSize _fileUploadSize; #endregion #region 圖像縮放 /// <summary> /// 圖像的縮放 /// </summary> /// <param name="file">縮放文件</param> /// <param name="width">寬</param> /// <param name="height">高</param> /// <param name="isEqualScale">是否等比例縮放</param> /// <param name="name">縮放后存放的地址</param> /// <returns></returns> bool CreateThumbnail(HttpPostedFile file, ImageSize imageSize, bool isEqualScale, string name) { double width = (double)imageSize.Width; double height = (double)imageSize.Height; ; try { System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream); if (isEqualScale) { if (image.Height > height) { hRate = height / image.Height; } if (image.Width > width) { wRate = width / image.Width; } if (wRate != 1 || hRate != 1) { if (wRate > hRate) { setRate = hRate; } else { setRate = wRate; } } newWidth = (int)(image.Width * setRate); newHeight = (int)(image.Height * setRate); if (height > newHeight) { point.Y = Convert.ToInt32(height / 2 - newHeight / 2); } if (width > newWidth) { point.X = Convert.ToInt32(width / 2 - newWidth / 2); } } Bitmap bit = new Bitmap((int)(width), (int)(height)); Rectangle r = new Rectangle(point.X, point.Y, (int)(image.Width * setRate), (int)(image.Height * setRate)); Graphics g = Graphics.FromImage(bit); g.Clear(Color.White); g.DrawImage(image, r); MemoryStream ms = new MemoryStream(); bit.Save(ms, ImageFormat.Jpeg); byte[] bytes = ms.ToArray(); string fileName = name + imageSize.ToString();//為縮放圖像重新命名 using (FileStream stream = new FileStream(fileName, FileMode.Create, FileAccess.Write)) { stream.Write(bytes, 0, bytes.Length); } bit.Dispose(); ms.Dispose(); image.Dispose(); return true; } catch (Exception) { return false; } } /// <summary> /// 圖像的等比例縮放,默認(rèn)文件名不改變,會(huì)將原文件覆蓋 /// </summary> /// <param name="file"></param> /// <param name="width"></param> /// <param name="height"></param> /// <returns></returns> bool CreateThumbnail(HttpPostedFile file, ImageSize imageSize, string name) { return CreateThumbnail(file, imageSize, true, name); } #endregion public string Upload(HttpContext context, UpLoadType type, bool isScale) { ImageSize imageSize = _fileUploadSize.ImageSizeForType[type]; HttpFileCollection files = context.Request.Files; if (files.Count == 0) { throw new ArgumentNullException("please choose file for upload."); } string path = "/upload/" + type.ToString();//相對(duì)路徑 if (!Directory.Exists(path)) Directory.CreateDirectory(path); // 只取第 1 個(gè)文件 var file = files[0]; if (file != null && file.ContentLength > 0) { try { string filename = context.Request.Form["fileName"].Split('.')[0] + "_" + DateTime.Now.ToString("yyyyMMddhhssmm") + imageSize.ToString(); // 本地文件系統(tǒng)路徑 string savePath = Path.Combine(context.Server.MapPath(path), filename); file.SaveAs(savePath); if (isScale) CreateThumbnail(file, imageSize, savePath); //返回URI路徑 string ImageUri = FileHostUri + path + "/" + filename; return "1|" + ImageUri; } catch (Exception ex) { return "0|" + ex.Message; } } return null; } } }
效果圖:
為大家推薦一個(gè)專題,供大家學(xué)習(xí):《ASP.NET文件上傳匯總》
以上就是關(guān)于ASP.NET文件上傳控件Uploadify的第一部分內(nèi)容介紹,接下來(lái)還有更新,希望大家不要錯(cuò)過(guò)。
相關(guān)文章
ASP.NET MVC下Ajax.BeginForm方式無(wú)刷新提交表單實(shí)例
下面小編就為大家分享一篇ASP.NET MVC下Ajax.BeginForm方式無(wú)刷新提交表單實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01在Asp.net用C#建立動(dòng)態(tài)Excel
在Asp.net用C#建立動(dòng)態(tài)Excel...2006-09-09- 就是有時(shí)候窗口不能夠成功置頂,這時(shí)需要重新切換下標(biāo)簽,就可以置頂了,本文介紹C# SetWindowPos實(shí)現(xiàn)窗口置頂?shù)姆椒?/div> 2012-12-12
.Net MVC將Controller數(shù)據(jù)傳遞到View
這篇文章介紹了.Net MVC將Controller數(shù)據(jù)傳遞到View的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03asp.net 生成靜態(tài)頁(yè)時(shí)的進(jìn)度條顯示
本文側(cè)重點(diǎn)在講解生成靜態(tài)頁(yè)的“進(jìn)度條”,所以將采用模擬的方法。生成靜態(tài)時(shí)需要生成的文章必須非常多,否則進(jìn)度條可能一閃而過(guò),看不到效果。2009-05-05vs2010無(wú)法打開(kāi)項(xiàng)目文件的原因分析及解決方法
使用 Visual Studio 2010 SP1 打開(kāi)項(xiàng)目文件的時(shí)候出現(xiàn)以下提示信息'無(wú)法打開(kāi)項(xiàng)目文件'此時(shí)此刻很是郁悶,不過(guò)已有解決方法了,感性的朋友可以了解下,或許可以解決你的難題2013-01-01最新評(píng)論