下載下來解壓后估計里面很多文件，其實有用的也就一個jquery.uploadify.js和uploadify.swf這兩個文件。當然啦，jQuery庫那是必須的。
在你使用的項目中，把jquery.uploadify.js引入以后，用法和大多數JQ插件一樣。同時也要記得引入swfobject.js這個插件，版本2.2以上的。使用方法例如：
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/UploadHandler.ashx',
width : 120
});
});
|
，上面的只是簡單的事例，下面我就把我在項目中做的發出來，每個都有解釋：file_upload_1其實也就是一個容器ID，比如
$(document).ready(function() {
$("#file_upload").uploadify({
//開啟調試
'debug' : false,
//是否自動上傳
'auto':false,
//超時時間
'successTimeout':99999,
//附帶值
'formData':{
'userid':'用戶id',
'username':'用戶名',
'rnd':'加密密文'
},
//flash
'swf': "uploadify.swf",
//不執行默認的onSelect事件
'overrideEvents' : ['onDialogClose'],
//文件選擇后的容器ID
'queueID':'uploadfileQueue',
//服務器端腳本使用的文件對象的名稱 $_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',
//上傳數量
'queueSizeLimit' : 25,
//每次更新上載的文件的進展
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//有時候上傳進度什么想自己個性化控制，可以利用這個方法
//使用方法見官方說明
},
//選擇上傳文件后調用
'onSelect' : function(file) {
},
//返回一個錯誤，選擇文件的時候觸發
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小異常！");
break;
case -130:
alert("文件 ["+file.name+"] 類型不正確！");
break;
}
},
//檢測FLASH失敗調用
'onFallback':function(){
alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試。");
},
//上傳到服務器，服務器返回相應信息到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"];
//其他參數
//string somekey = context.Request["someKey"];
//string other = context.Request["someOtherKey"];
//獲取文件的保存路徑
//string uploadPath = HttpContext.Current.Server.MapPath("UploadImages" + "\\");
string uploadPath = context.Request.Form["uploadPath"];
//沒有指定上傳路徑，則使用默認路徑
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"];
//沒有指定文件名，則生成一個隨機文件名
if (string.IsNullOrEmpty(_filename) || _filename == "")
{
DateTime _temDT = DateTime.Now;
//擴展名
string sExt = file.FileName.Substring(file.FileName.LastIndexOf(".")).ToLower();
//生成隨機數
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;
}
}
}
|
