ASP.NET文件上傳控件Uploadify的用法

本篇內容主要講解“ASP.NET文件上傳控件Uploadify的用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ASP.NET文件上傳控件Uploadify的用法”吧!

相關API介紹

uploader ： uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊后淡出打開文件對話框，默認值：uploadify.swf。
script ：   后臺處理程序的相對路徑 。默認值：uploadify.php
checkScript ：用來判斷上傳選擇的文件在服務器是否存在的后臺處理程序的相對路徑
fileDataName ：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認為Filedata
method ： 提交方式Post 或Get 默認為Post
scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設置為always，默認值：sameDomain 
folder ：  上傳文件存放的目錄 。
queueID ： 文件隊列的ID，該ID與存放文件隊列的div的ID一致。
queueSizeLimit ： 當允許多文件生成時，設置選擇文件的個數，默認值：999 。
multi ： 設置為true時可以上傳多個文件。
auto ： 設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 。

fileExt ： 設置可以選擇的文件的類型，格式如：'*.jpg;*.gif,*.png' 。

fileDesc ： 這個屬性值必須設置fileExt屬性后才有效，用來設置選擇文件對話框中的提示文本，如設置fileDesc為“請選擇圖像文件”，
sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 允許同時上傳的個數 默認值：1 。
buttonText ： 瀏覽按鈕的文本，默認值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設置為true則隱藏瀏覽按鈕的圖片 。
rollover ： 值為true和false，設置為true時當鼠標移到瀏覽按鈕上時有反轉效果。
width ： 設置瀏覽按鈕的寬度 ，默認值：110。
height ： 設置瀏覽按鈕的高度 ，默認值：30。
wmode ： 設置該項為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會被置為頁面的最高層。 默認值：opaque 。
cancelImg ：選擇文件到文件隊列中后的每一個文件上的關閉按鈕圖標

結構圖

HTML代碼

<div>
 <div class="inputDiv fl">
 <input type="text" name="ImagePath" id="ImagePath" >
 <img  />
 </div>
 <div class="fl" >
 <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,/*如果是自動上傳,那上傳按鈕將沒用了*/
 'fileExt': '*.jpg;*.gif;*.jpeg;*.mp4',
 'fileDesc': '請選擇圖像或者視頻',
 '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") { //提示錯誤信息
  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>

后臺處理程序(接收流,寫入流)

namespace WebTest.ashx
{
 /// <summary>
 /// UploadFile 的摘要說明
 /// </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>
 /// 圖像上傳功能的實現
 /// </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); //圖像從那個坐標點進行截取
 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>
 /// 圖像的等比例縮放,默認文件名不改變，會將原文件覆蓋
 /// </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();//相對路徑

  if (!Directory.Exists(path))
  Directory.CreateDirectory(path);
  // 只取第 1 個文件
  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();

   // 本地文件系統路徑
   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;
 }

 }
}

效果圖：

到此，相信大家對“ASP.NET文件上傳控件Uploadify的用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！