引言
之前寫過一篇使用swfupload上傳圖片的文章：周末大放送網站圖片上傳，水印，預覽，截圖，這里分析一下，當時使用uploadify上傳，無法獲取上傳后，圖片路徑的問題。當時沒有測試沒有成功，一直憋在心里有點難受，有點完美強迫症了。
項目結構
測試
相關配置說明，已在代碼中注釋說明，文章結束出提供代碼下載。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Wolfy.UploadifyDemo.Default" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <%-- 首先引入相關的css，js文件 --%> 10 <link href="Uploadify/css/uploadify.css" rel="stylesheet" /> 11 <script src="Uploadify/js/jquery-1.10.2.min.js"></script> 12 <script src="Uploadify/js/uploadify3.2.1/jquery.uploadify.min.js"></script> 13 </head> 14 <body> 15 <form id="form1" runat="server"> 16 <div class="divMain"> 17 <div id="fileQueue"> 18 </div> 19 <input type="file" name="uploadify" id="file_upload" /> 20 <div id="haveupfile"> 21 </div> 22 <div> 23 <div> 24 <a href="javascript:$('#file_upload').uploadify('cancel','*');">取消上傳（將觸發onClearQueue事件）</a> 25 </div> 26 <div> 27 <a href="javascript:$('#file_upload').uploadify('destroy')">銷毀（將調用Destroy）</a> 28 </div> 29 <div> 30 <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上傳功能</a> 31 </div> 32 <div> 33 <a href="javascript:$('#file_upload').uploadify('disable', false);">啟用上傳功能</a> 34 </div> 35 <p>uploadify中的方法</p> 36 <div> 37 <a href="javascript:$('#file_upload').uploadify('cancel')">取消隊列中第一個文件</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消隊列中所有文件</a> | <a href="javascript:$('#file_upload').uploadify('upload', '*')">開始上傳隊列中所有文件</a> 38 </div> 39 <div> 40 <a href="javascript:$('#file_upload').uploadify('destroy')">銷毀Uploadify實例</a> 41 </div> 42 <div> 43 <a href="javascript:$('#file_upload').uploadify('disable', true)">禁用選擇按鈕</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">啟用選擇按鈕</a> 44 </div> 45 <div> 46 <a href="javascript:changeBtnText()">改變按鈕上面的文字</a> | <a href="javascript:returnBtnText();">讀取按鈕上面的文字</a> 47 </div> 48 <div> 49 <a href="javascript:$('#file_upload').uploadify('upload', '*')">開始上傳</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上傳</a> 50 </div> 51 </div> 52 </div> 53 </form> 54 </body> 55 </html> 56 57 <script type="text/javascript"> 58 $(function () { 59 $('#file_upload').uploadify({ 60 'auto': false, //選擇文件后是否自動上傳，默認為true 61 'buttonClass': 'some-class', 62 //'buttonImage': 'Uploadify/icon/btn.png',//選擇文件按鈕 63 'buttonText': '瀏 覽',//設置按鈕文本 64 //'debug': true,//是否打開調試模式，默認為false 65 'fileSizeLimit': '5000KB',//單個文件大小，0為無限制，可接受KB,MB,GB等單位的字符串值 66 'fileTypeDesc': 'Image Files',//文件描述 67 'fileTypeExts': '*.gif; *.jpg; *.png',//允許上傳的文件類型 68 //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },//傳參數 69 //'height': 50,//按鈕的高度 70 //'itemTemplate': '<div id="${fileID}" class="uploadify-queue-item">\ 71 // <div class="cancel">\ 72 // <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ 73 // </div>\ 74 // <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\ 75 // </div>',//隊列中的每個項目一個特殊的HTML模板 76 //'method': 'post',//請求方式"get"或者"post",默認為"post" 77 //'multi': false,//是否允許同時選擇多個文件，默認為true 78 //'overrideEvents': ['onUploadError'],//不執行某個默認事件如：onUploadError上傳失敗事件 79 //'preventCaching': false,//是否取消緩存，默認為true沒有緩存 80 //'progressData': 'speed',//上傳進度條顯示，'percentage'or'speed'默認為'percentage' 81 'queueID': 'fileQueue',//隊列的ID,一個存放上傳文件div的ID 82 //'queueSizeLimit':1,//可同事選擇上傳文件的數量，默認為999 83 //'removeCompleted': false,//是否移除在隊列中上傳完成的文件，默認為true 84 //'removeTimeout': 10,//在隊列中上傳完成延遲多少秒移除，默認為3秒 85 //'requeueErrors': true,//上傳失敗是否重新上傳，默認為false 86 //'successTimeout': 5,//上傳成功之后等待響應時間swf成功，默認為30秒 87 'swf': 'Uploadify/js/uploadify3.2.1/uploadify.swf',//FLash文件路徑 88 'uploader': '/UploadHander.ashx',//上傳文件處理后台頁面 89 //'uploadLimit': 1,//允許上傳最大文件數，超過onUploadError事件被觸發，默認999 90 //'width': 300,//按鈕寬度 91 /**********************************************事件***********************************************************************/ 92 //'onCancel': function (file) {//取消單個文件上傳觸發 93 // alert('The file ' + file.name + ' was cancelled.') 94 //}, 95 //'onClearQueue': function (queueItemCount) {//取消隊列中所用上傳文件觸發 96 // alert(queueItemCount + ' file(s) were removed from the queue'); 97 //}, 98 //'onDestroy': function () {//銷毀觸發 99 // alert('I am getting destroyed!'); 100 //}, 101 //'onDialogClose': function (queueData) {//關閉窗口時觸發 102 // //queueData屬性如下 103 // //filesSelected：在瀏覽文件對話框中選擇文件的數量 104 // //filesQueued：添加到隊列中文件的數量（即沒有返回錯誤） 105 // //filesReplaced：在隊列中替換的文件數 106 // //filesCancelled：文件已被添加到隊列中取消數（不更換） 107 // //filesErrored：返回錯誤的文件數 108 // alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.'); 109 //}, 110 //'onDialogOpen': function () {//打開對話框時觸發 111 //}, 112 //'onDisable': function () {//禁用上傳功能觸發 113 // alert('You have disabled Uploadify!'); 114 //}, 115 //'onEnable': function () {//啟用上傳功能觸發 116 // alert('You can use Uploadify again.'); 117 //}, 118 'onFallback': function () {//初始化瀏覽器不兼容觸發 也可監視瀏覽器是否禁用flash播放插件 119 alert('Flash was not detected.'); 120 }, 121 //'onInit': function (instance) {//初始化時觸發 122 // alert('The queue ID is ' + instance.settings.queueID); 123 //}, 124 //'onQueueComplete': function (queueData) {//隊列中所有文件處理完成觸發 125 // //queueData屬性如下 126 // //uploadsSuccessful：上傳的文件數量已順利完成 127 // //uploadsErrored：傳回錯誤的上傳數量 128 // alert(queueData.uploadsSuccessful + ' files were successfully uploaded.'); 129 //}, 130 //'onSelect': function (file) {//選擇文件時觸發 131 // alert('The file ' + file.name + ' was added to the queue.'); 132 //}, 133 //'onSelectError': function () {//選擇文件出現錯誤時觸發，如超出文件大小設置 134 // //返回file 135 // //返回errorCode 136 // //返回errorMsg 137 // //alert(errorCode); 138 // //alert('The file ' + file.name + ' returned an error and was not added to the queue.'); 139 //}, 140 //'onSWFReady': function () {//當Flash對象加載觸發。 141 // alert('The Flash file is ready to go.'); 142 //}, 143 //'onUploadComplete': function (file) {//當上傳完成后是否成功，或返回錯誤為每個文件觸發一次 144 // alert('The file ' + file.name + ' finished processing.'); 145 //}, 146 //'onUploadError': function (file, errorCode, errorMsg, errorString) {//上傳文件失敗時觸發 147 // alert('The file ' + file.name + ' could not be uploaded: ' + errorString); 148 //}, 149 //'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//上傳進度數據 150 // $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.'); 151 //}, 152 //'onUploadStart': function (file) {//開始上傳觸發 153 // alert('Starting to upload ' + file.name); 154 //}, 155 //'onUploadSuccess': function (file, data, response) {//上傳成功后觸發，每個文件都觸發 156 // alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data); 157 //} 158 }); 159 }); 160 function changeBtnText() { 161 $('#file_upload').uploadify('settings', 'buttonText', 'BROWSE'); 162 } 163 164 function returnBtnText() { 165 alert('The button says ' + $('#file_upload').uploadify('settings', 'buttonText')); 166 } 167 </script>
IE9中兼容性視圖模式瀏覽
然后單擊開始上傳，會報如下錯誤：
那么，如何解決這個問題呢？首先想到的就是兼容性的問題，經測試在IE8，IE9(9)下是正常的，IE7和IE9兼容性視圖下不行。
如果在IE9下，禁用flashplayer就會出現上述的錯誤：
如果禁用flash object，在ie9下刷新，會觸發uploadify的onFallback事件：
然后單擊上傳，出現
可見uploadify上傳文件跟客戶端瀏覽器是否禁用flash有關。在ie7下，測試有的電腦上可以，有的不可以，猜想是否跟flash版本有關？讓人很無語。
ie7下可采用這種設置：
將uploadify的onUploadSuccess事件取消注釋，上傳圖片：
處理上傳圖片的一般處理程序：
1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Web; 6 7 namespace Wolfy.UploadifyDemo 8 { 9 /// <summary> 10 /// UploadHander 的摘要說明 11 /// </summary> 12 public class UploadHander : IHttpHandler 13 { 14 15 public void ProcessRequest(HttpContext context) 16 { 17 context.Response.ContentType = "text/plain"; 18 HttpPostedFile file = context.Request.Files["Filedata"]; 19 string uploadPath = context.Request.MapPath("/UploadFile/"); 20 if (file != null) 21 { 22 //新文件名 23 string filename = DateTime.Now.ToString("yyyyMMddhhmmss") + "_" + Path.GetFileName(file.FileName); 24 file.SaveAs(uploadPath + filename); 25 context.Response.Write("/UploadFile/" + filename); 26 } 27 else 28 { 29 context.Response.Write("0"); 30 } 31 } 32 33 public bool IsReusable 34 { 35 get 36 { 37 return false; 38 } 39 } 40 } 41 }
總結
將uploadify常用到的配置信息，總結在一個頁面中，用到哪個就將哪個的注釋去掉就可以了，不用再去百度或google了。如果能幫到你，不妨推薦一下！
代碼下載，猛戳這里：http://pan.baidu.com/s/1ntv20Dr