主頁 > 知識庫 > ASP.NET文件上傳控件Uploadify的使用方法

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

熱門標(biāo)簽:塔城代理外呼系統(tǒng) 地圖標(biāo)注的公司有哪些 代理接電話機(jī)器人如何取消 遂寧市地圖標(biāo)注app 400電話辦理哪家性價(jià)比高 地圖標(biāo)注專業(yè)團(tuán)隊(duì) 天心智能電銷機(jī)器人 地圖定位圖標(biāo)標(biāo)注 濮陽外呼電銷系統(tǒng)怎么樣

對于文件上傳來說,有很多種實(shí)現(xiàn)方式,如傳統(tǒng)的表單方式,現(xiàn)在流行的flash方式,甚至還有純JS方式,之所以有這些方式來實(shí)現(xiàn)文件上傳,我想主要原因是因?yàn)?傳統(tǒng)的上傳對于大文件支持不夠,因?yàn)樗菃尉€程同步機(jī)制,當(dāng)大文件通過HTTP方式發(fā)送到服務(wù)端時(shí),對于服務(wù)端站點(diǎn)的主線程影響比較大,會產(chǎn)生阻塞,所以,現(xiàn)在很多上傳控制都是異步,多線程的方式去實(shí)現(xiàn)的.

今天來介紹一個文件上傳控制,它就是Uploadify,它應(yīng)該是flash的異步上傳工具,對于大文件支持還不錯,所以,我選擇了它.

相關(guān)API介紹

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

fileExt : 設(shè)置可以選擇的文件的類型,格式如:'*.jpg;*.gif,*.png' 。

fileDesc : 這個屬性值必須設(shè)置fileExt屬性后才有效,用來設(shè)置選擇文件對話框中的提示文本,如設(shè)置fileDesc為“請選擇圖像文件”,
sizeLimit : 上傳文件的大小限制 。
simUploadLimit : 允許同時(shí)上傳的個數(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文件會被置為頁面的最高層。 默認(rèn)值:opaque 。
cancelImg :選擇文件到文件隊(duì)列中后的每一個文件上的關(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,/*如果是自動上傳,那上傳按鈕將沒用了*/
 '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>
 /// 圖像上傳功能的實(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); //圖像從那個坐標(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)文件名不改變,會將原文件覆蓋
 /// /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();

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

 }
}

效果圖:

為大家推薦一個專題,供大家學(xué)習(xí):《ASP.NET文件上傳匯總》

以上就是關(guān)于ASP.NET文件上傳控件Uploadify的第一部分內(nèi)容介紹,接下來還有更新,希望大家不要錯過。

您可能感興趣的文章:
  • ASP.NET插件uploadify批量上傳文件完整使用教程
  • ASP.NET多文件上傳控件Uploadify的使用方法
  • asp.net(c#)開發(fā)中的文件上傳組件uploadify的使用方法(帶進(jìn)度條)
  • JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
  • asp.net uploadify實(shí)現(xiàn)多附件上傳功能
  • asp.net使用jQuery Uploadify上傳附件示例
  • ASP.NET MVC4 利用uploadify.js多文件上傳

標(biāo)簽:重慶 河南 婁底 麗江 汕頭 宜春 吉林 本溪

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ASP.NET文件上傳控件Uploadify的使用方法》,本文關(guān)鍵詞  ASP.NET,文件,上傳,控件,Uploadify,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ASP.NET文件上傳控件Uploadify的使用方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于ASP.NET文件上傳控件Uploadify的使用方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章