上傳(jquery.uploadify.js)
阿新 • • 發佈:2019-01-29
注:這是學習筆記!!!
首先引用js外掛jquery.uploadify.js
以下是js處理範例,詳細見官網
//上傳圖片附件
var folder = "/Upload/";
$(".file_upload").uploadify({
//'debug': false, //開啟除錯
'auto': true,//是否自動上傳
'successTimeout': 99999, //超時時間
'uploader': '/Areas/Inquiry/UploadImage.ashx' , //指定伺服器端上傳處理檔案
'buttonText': '上傳檔案', //按鈕名字
'swf': "/Content/Uploadify/uploadify.swf",
'overrideEvents': ['onDialogClose', 'onSelectError'], //不執行預設的onSelect事件
'queueID': 'showProgess', //檔案選擇後的容器ID
'fileObjName': 'Filedata' , //伺服器端指令碼使用的檔案物件的名稱 $_FILES個['upload']
//'buttonImage': 'upbutton.gif',//瀏覽按鈕的背景圖片路徑
//瀏覽按鈕的寬度
'width': '80',
'formData': { 'folder': folder, },
'multi': true, // 是否可上傳多個
//瀏覽按鈕的高度+
'height': '32',
//'expressInstall': 'expressInstall.swf',//expressInstall.swf檔案的路徑。
'fileTypeDesc': '支援的格式:',//在瀏覽視窗底部的檔案型別下拉選單中顯示的文字
//允許上傳的檔案字尾
//任務 884: 使簽章的報告正文支援pdf格式
//'fileTypeExts': '*.docx;*.doc',
//任務 1505: 線上委託2.0 流程測試第二輪 金融端問題綜合
'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png', //上傳檔案的大小限制
//任務 1505 end
//end 884
'fileSizeLimit': '50MB',
'removeCompleted': true, //自動將已完成任務從佇列中刪除
'removeTimeout': 1, //設定從佇列移除的時間間隔
'queueSizeLimit': 9, //佇列裡數量
//'checkExisting': true,
//'cancelImg': '/Content/Uploadify/uploadify-cancel.png', //3.2設定無效
//'uploadLimit': 1,
//每次更新上載的檔案的進展
'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//有時候上傳進度什麼想自己個性化控制,可以利用這個方法
//使用方法見官方說明
},
//選擇上傳檔案後呼叫
'onSelect': function (file) {
},
//返回一個錯誤,選擇檔案的時候觸發
'onSelectError': function (file, errorCode, errorMsg) {
switch (errorCode) {
case -100:
layer.alert("上傳的檔案數量已經超出系統限制的" + $('.file_upload').uploadify('settings', 'queueSizeLimit') + "個檔案!");
break;
case -110:
layer.alert("檔案 [" + file.name + "] 大小超出系統限制的" + $('.file_upload').uploadify('settings', 'fileSizeLimit') + "大小!");
break;
case -120:
layer.alert("檔案 [" + file.name + "] 大小異常!");
break;
case -130:
layer.alert("檔案 [" + file.name + "] 型別不正確!");
break;
}
return false;
},
//檢測FLASH失敗呼叫
'onFallback': function () {
layer.alert("您未安裝FLASH控制元件,無法上傳圖片!請安裝FLASH控制元件後再試。");
},
//上傳到伺服器,伺服器返回相應資訊到data裡
'onUploadSuccess': function (file, data, response) {
var imgSrc = folder + data;//當前圖片路徑,資料夾路徑加圖片名
}
});
以下是上傳在後臺一般程式裡面的處理
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
//HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
foreach (string key in files)
{
HttpPostedFile file = files[key];
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.'));
Random random = new Random();
var FileName = random.Next(10000000, 100000000);
file.SaveAs(uploadPath + FileName + fileExt);
//把現在上傳的照片在服務端壓縮成三檔:高、中、低,預設分別為1024、480、120
//string sizeConfig = Biz.BLL.SystemBase.Common.GetConfigValue(Constant.SYS_Config.PHOTO_COMPRESS_SIZE);
//string[] size = sizeConfig.Split(',');
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_H.jpg", Convert.ToInt32(size[0]), 0, "H");
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_M.jpg", Convert.ToInt32(size[1]), 0, "M");
//ThumbnailHelper.MakeThumbnail(uploadPath + FileName + fileExt, uploadPath + FileName + "_L.jpg", Convert.ToInt32(size[2]), 0, "L");
context.Response.Write(FileName + fileExt);
//End
}
}
else
{
context.Response.Write("0");
}
}
catch (Exception e)
{
LoggerHelper.Error("上傳失敗:", e);
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}