下載下來解壓后估計里面很多文件，其實有用的也就一個jquery.uploadify.js和uploadify.swf這兩個文件。當(dāng)然啦，jQuery庫那是必須的。
在你使用的項目中，把jquery.uploadify.js引入以后，用法和大多數(shù)JQ插件一樣。同時也要記得引入swfobject.js這個插件，版本2.2以上的。使用方法例如：
$(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/UploadHandler.ashx', width : 120 });}); |
，上面的只是簡單的事例，下面我就把我在項目中做的發(fā)出來，每個都有解釋：file_upload_1其實也就是一個容器ID，比如
$(document).ready(function() { $("#file_upload").uploadify({ //開啟調(diào)試 'debug' : false, //是否自動上傳 'auto':false, //超時時間 'successTimeout':99999, //附帶值 'formData':{ 'userid':'用戶id', 'username':'用戶名', 'rnd':'加密密文' }, //flash 'swf': "uploadify.swf", //不執(zhí)行默認(rèn)的onSelect事件 'overrideEvents' : ['onDialogClose'], //文件選擇后的容器ID 'queueID':'uploadfileQueue', //服務(wù)器端腳本使用的文件對象的名稱 $_FILES個['upload'] 'fileObjName':'upload', //上傳處理程序 'uploader':'imageUpload.php', //瀏覽按鈕的背景圖片路徑 'buttonImage':'upbutton.gif', //瀏覽按鈕的寬度 'width':'100', //瀏覽按鈕的高度 'height':'32', //expressInstall.swf文件的路徑。 'expressInstall':'expressInstall.swf', //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本 'fileTypeDesc':'支持的格式：', //允許上傳的文件后綴 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', //上傳文件的大小限制 'fileSizeLimit':'3MB', //上傳數(shù)量 'queueSizeLimit' : 25, //每次更新上載的文件的進(jìn)展 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { //有時候上傳進(jìn)度什么想自己個性化控制，可以利用這個方法 //使用方法見官方說明 }, //選擇上傳文件后調(diào)用 'onSelect' : function(file) { }, //返回一個錯誤，選擇文件的時候觸發(fā) 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上傳的文件數(shù)量已經(jīng)超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！"); break; case -110: alert("文件 ["+file.name+"] 大小超出系統(tǒng)限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！"); break; case -120: alert("文件 ["+file.name+"] 大小異常！"); break; case -130: alert("文件 ["+file.name+"] 類型不正確！"); break; } }, //檢測FLASH失敗調(diào)用 'onFallback':function(){ alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試。"); }, //上傳到服務(wù)器，服務(wù)器返回相應(yīng)信息到data里 'onUploadSuccess':function(file, data, response){ alert(data); } });}); |
上傳后臺處理程序UploadHandler.ashx：大體上常用的我想也就這些，至于后端處理上傳部分，我這里就不多講了，和普通的文件上傳處理方式是一樣的。
/// <summary> /// UploadHandler 的摘要說明 /// </summary> public class UploadHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { try { context.Response.ContentType = "text/plain"; //接收上傳后的文件 HttpPostedFile file = context.Request.Files["Filedata"]; //其他參數(shù) //string somekey = context.Request["someKey"]; //string other = context.Request["someOtherKey"]; //獲取文件的保存路徑 //string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "//"); string uploadPath = context.Request.Form["uploadPath"]; //沒有指定上傳路徑，則使用默認(rèn)路徑 if (string.IsNullOrEmpty(uploadPath) || uploadPath == "") { uploadPath = string.Format("/upload/images/{0}/{1}/", DateTime.Now.Year, DateTime.Now.Month.ToString("D2")); } string fullUploadPath = HttpContext.Current.Server.MapPath(uploadPath); //判斷上傳的文件是否為空 if (file != null) { if (!Directory.Exists(fullUploadPath)) { Directory.CreateDirectory(fullUploadPath); } //文件名 string _filename = context.Request.Form["uploadFileName"]; //沒有指定文件名，則生成一個隨機(jī)文件名 if (string.IsNullOrEmpty(_filename) || _filename == "") { DateTime _temDT = DateTime.Now; //擴(kuò)展名 string sExt = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower(); //生成隨機(jī)數(shù) int digit = 6; Random _rnd = new Random(); string rnd = _rnd.Next((int)Math.Pow(10, digit), (int)Math.Pow(10, digit + 1)).ToString(); //文件名 _filename = string.Format("{0}{1}{2}", _temDT.Ticks.ToString(), rnd, sExt); } //保存文件 file.SaveAs(fullUploadPath + _filename); context.Response.Write(string.Format("{{/"code/":/"1/",/"msg/":/"上傳成功/",/"filePath/":/"{0}/",/"fileName/":/"{1}/"}}", uploadPath + _filename, _filename)); } else { context.Response.Write("{{/"code/":/"0/",/"msg/":/"沒有要上傳的文件！/"}}"); } } catch (Exception ex) { context.Response.Write(string.Format("{{/"code/":/"0/",/"msg/":/"{0}/"}}", ex.Message)); } finally { context.Response.End(); } } public bool IsReusable { get { return false; } } } |
