為了記錄工作中碰到的各種問(wèn)題,以及學(xué)習(xí)資料整理,今天開始,將以往的文章進(jìn)行了一個(gè)整理,以后也開始認(rèn)真的記錄學(xué)習(xí)過(guò)程中的各種問(wèn)題
在HTML里面的文件上傳功能一直是個(gè)問(wèn)題,為了實(shí)現(xiàn)上傳文件大小限制,怎樣顯示進(jìn)度條問(wèn)題,以及上傳前圖片預(yù)覽,也試過(guò)各種辦法,直到有一天看到百度編輯器中的圖片上傳功能。花了點(diǎn)功夫把他單獨(dú)提取出來(lái)。
最終效果圖如下:
這個(gè)功能可以提供多個(gè)圖片文件選擇,預(yù)覽,然后對(duì)上傳的圖片在上傳隊(duì)列中刪除,以及旋轉(zhuǎn)和,上傳中進(jìn)度條顯示,以及上傳相冊(cè)的選擇。%20
源代碼下載路徑為:http://pan.baidu.com/s/13iNYw
結(jié)構(gòu)
1:FLASH文件:imageUploader.swf%20
用來(lái)顯示上傳隊(duì)列,并提供圖片增加,預(yù)覽,刪除,旋轉(zhuǎn),以及進(jìn)度條的顯示功能!
包括了一些參數(shù)設(shè)置,例如上傳處理程序,以及相關(guān)的屬性設(shè)置。其中最重要參數(shù)為:flashvars,%20他的值經(jīng)過(guò)URL編碼。
URL編碼轉(zhuǎn)換功能,你可以通過(guò)http://tool.chinaz.com/Tools/URLEncode.aspx%20這個(gè)工具實(shí)現(xiàn)。
原始值為:
container=flashContainer&url=/BaiduUE/imageUp&ext={"param1":"value1",%20"param2":"value2"}&fileType={"descrurl:"/BaiduUE/imageUp", // 上傳處理頁(yè)面的url地址 ext:'{"param1":"value1", "param2":"value2"}', //可向服務(wù)器提交的自定義參數(shù)列表 fileType:'{"description":"圖片", "extension":"*.gif;*.jpeg;*.png;*.jpg"}', //上傳文件格式限制 flashUrl:'imageUploader.swf', //上傳用的flash組件地址 width:608, //flash的寬度 height:272, //flash的高度 gridWidth:121, // 每一個(gè)預(yù)覽圖片所占的寬度 gridHeight:120, // 每一個(gè)預(yù)覽圖片所占的高度 picWidth:100, // 單張預(yù)覽圖片的寬度 picHeight:100, // 單張預(yù)覽圖片的高度 uploadDataFieldName:"upfile", // POST請(qǐng)求中圖片數(shù)據(jù)的key picDescFieldName:'pictitle', // POST請(qǐng)求中圖片描述的key maxSize:4, // 文件的最大體積,單位M compressSize:2, // 上傳前如果圖片體積超過(guò)該值,會(huì)先壓縮,單位M maxNum:32, // 單次最大可上傳多少個(gè)文件 compressSide:0, //等比壓縮的基準(zhǔn),0為按照最長(zhǎng)邊,1為按照寬度,2為按照高度 compressLength:900 //能接受的最大邊長(zhǎng),超過(guò)該值Flash會(huì)自動(dòng)等比壓縮 2:JS腳本
用來(lái)于處理外部相冊(cè)選擇,以及FLASH事件相應(yīng),以及調(diào)用FLASH上傳功能來(lái)實(shí)現(xiàn)圖片上傳
/***********************Flash事件*****************************//*** 檢查flash狀態(tài)* @private* @param {Object} target flash對(duì)象* @return {Boolean}*/function _checkReady(target) { if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) { return true; } else { return false; }}/*** 創(chuàng)建一個(gè)隨機(jī)的字符串* @private* @return {String}*/function _createString() { var prefix = 'mw__flash__'; return prefix + Math.floor(Math.random() * 2147483648).toString(36);}/*** 為傳入的匿名函數(shù)創(chuàng)建函數(shù)名* @private* @param {String|Function} fun 傳入的匿名函數(shù)或者函數(shù)名* @return {String}*/function _createFunName(fun) { var name = ''; name = _createString(); window[name] = function () { fun.apply(window, arguments); }; return name;}/***反復(fù)判斷Flash是歐加載完成,完成后為Flash添加回調(diào)函數(shù)..*/var interval = setInterval(function () { try { var flash = thisMovie("flash"); if (_checkReady(flash)) { //輪詢flash的某個(gè)方法即可 var callBack = []; callBack[0] = _createFunName(selectFileCallback); callBack[1] = _createFunName(exceedFileCallback); callBack[2] = _createFunName(deleteFileCallback); callBack[3] = _createFunName(StartUploadCallback); callBack[4] = _createFunName(uploadCompleteCallback); callBack[5] = _createFunName(uploadErrorCallback); callBack[6] = _createFunName(allCompleteCallback); callBack[7] = _createFunName(changeHeightCallback); thisMovie("flash").call('setJSFuncName', [callBack]); clearInterval(interval); } } catch (ex) { }}, 20);//獲得Flash對(duì)象function thisMovie(movieName) { if (navigator.appName.indexOf("Misrosoft") != -1) { return window[movieName]; } else { return document[movieName]; }}3:一般處理程序:Upload.ashx
用來(lái)實(shí)現(xiàn)asp.net圖片服務(wù)器保存
string state = "SUCCESS"; string URL = null; string currentType = null; string uploadpath = null; string filename = null; string originalName = null; HttpPostedFile uploadFile = null; public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(UploadPoto(context)); } #region 照片上傳 public string UploadPoto(HttpContext context) { int aid = Convert.ToInt32(context.Request.Form["aid"]); //獲得相冊(cè)ID bool mark = Convert.ToString(context.Request.Form["mark"]).ToLower() == "true"; //獲得是否有水印 //上傳配置 string pathbase = "Upload/" + aid.ToString(); //保存路徑 int size = 2; //文件大小限制,單位MB string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允許格式 //上傳圖片 Hashtable info = new Hashtable(); info = upFile(context,pathbase, filetype, size, mark); //獲取上傳狀態(tài) string title = getOtherInfo(context,"pictitle"); //獲取圖片描述 string oriName = getOtherInfo(context,"fileName"); //獲取原始文件名 string ret = "{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}"; return ret; } private Hashtable upFile(HttpContext context,string pathbase, string[] filetype, int size, bool mark) { pathbase = pathbase + "/"; uploadpath = context.Server.MapPath(pathbase);//獲取文件上傳路徑 try { uploadFile = context.Request.Files[0]; originalName = uploadFile.FileName; //目錄創(chuàng)建 createFolder(); //格式驗(yàn)證 if (checkType(filetype)) { state = "不允許的文件類型"; } //大小驗(yàn)證 if (checkSize(size)) { state = "文件大小超出網(wǎng)站限制"; } //保存圖片 if (state == "SUCCESS") { filename = reName(); string smallPath = reSmallName(); string waterPath = rePicName(); uploadFile.SaveAs(uploadpath + filename); string savePath = uploadpath + filename; ImageClass imageClass = new ImageClass(); if (imageClass.ShowThumbnail(savePath, uploadpath + smallPath, 640)) //如果有小圖,則刪除原圖 { FileInfo fi = new FileInfo(savePath); fi.Delete(); URL = pathbase + smallPath; filename = smallPath; } else { URL = pathbase + filename; } if (mark) { string watxt = "我是水印哈。。。"; if (ImageClass.WriterText(uploadpath + filename, uploadpath + waterPath, watxt)) { URL = pathbase + waterPath; filename = waterPath; } } } } catch (Exception e) { state = "未知錯(cuò)誤"; URL = ""; } return getUploadInfo(); } #endregion #region 上傳文件的輔助方法 /** * 獲取文件信息 * @param context * @param string * @return string */ protected string getOtherInfo(HttpContext context,string field) { string info = null; if (context.Request.Form[field] != null && !String.IsNullOrEmpty(context.Request.Form[field])) { info = field == "fileName" ? context.Request.Form[field].Split(',')[1] : context.Request.Form[field]; } return info; } /** * 獲取上傳信息 * @return Hashtable */ protected Hashtable getUploadInfo(
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注