[Asp.net]Uploadify所有配置說明,常見bug問題分析

阿新 • • 發佈：2019-01-13

引言

之前寫過一篇使用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了。如果能幫到你，不妨推薦一下！

[Asp.net]Uploadify所有配置說明,常見bug問題分析

引言之前寫過一篇使用swfupload上傳圖片的文章：週末大放送網站圖片上傳，水印，預覽，截圖，這裡分析一下，當時使用uploadify上傳，無法獲取上傳後，圖片路徑的問題。當時沒有測試沒有成功，一直憋在心裡有點難受，有點完美強迫症了。專案結構測試相關配置說明，已在程式碼中註釋說明，文章

在Asp.net core使用配置Json創建動態目錄樹

ref 一個 left 設置構造 path pat aspnet 演示一、前言　　使用動態目錄樹可以使左邊欄中的目錄更加靈活，本文介紹如何將目錄保存在json配置文件中，再讀取出來經過處理後生成目錄樹。二、數據結構　　1. TreeMenuNode類名　　將Tr

ASP.NET中的配置文件

機器針對 str ont 軟件安裝宋體一點讀取找文件在機房收費系統的時候以前應用過配置文件，當時也就那麽一用對配置文件了解的不是非常透徹。以下就來總結一下有關配置文件的一些操作。什麽是配置文件

ASP.NET偽靜態配置

sof work 找到 isp 但是路徑 rewrite .html hand 一、下載URLRewriter.dll 二、在項目中添加URLRewrite的引用三、配置webconfig 1.在<configuration>節點中添加： 1

ASP .NET CORE 讀取配置文件的方法

pat clu ros man tab nta director basepath 定義老式的config文件在ASP。net core2.0中變成了appsettings.json，如果想要讀取自定義配置，可以寫如下代碼 { "Logging": { "I

[ASP.NET]NTKO插件使用常見問題

站點 ica idt 3.3 rpo 加載項 bili 顯示器 .dll 一、環境要求 NTKO OFFICE文檔控件能夠在IE、谷歌Chrome、Firefox等瀏覽器中直接編輯MS Office、WPS、金山電子表、永中Office等文檔並保存到WEB服務器。（標準版對

ASP.NET Core 專案配置 ( Startup )（轉載）

原文：https://www.twle.cn/l/yufei/aspnetcore/dotnet-aspnet-startup.html 由於是個人網站，怕沒了，特意複製儲存，個人覺得講的非常透徹前面幾章節中我們已經介紹和使用過 Startup 類

ASP.NET 4.0配置檔案中的ClientIDMode屬性

ASP.NET 4.0配置檔案中的ClientIDMode屬性來自森大科技官方部落格 http://www.cnsendblog.com/index.php/?p=99時光流逝，我們心愛的ASP.NET也步入了4.0的時代，微軟在ASP.NET 4.0中對很多特性做了修改。比如我將要討論的控制元件ID機制就是

ASP.NET 4.0配置文件中的ClientIDMode屬性

ont .cn 微軟 tex left 現在判斷 mode name ASP.NET 4.0配置文件中的ClientIDMode屬性來自森大科技官方博客 http://www.cnsendblog.com/index.php/?p=99 時光流逝，我們心愛的ASP.N

ASP.NET Core MVC配置與JSON序列化

MVC配置在ConfigureServices方法中可以呼叫AddMvc(options)設定options，其中有個配置是options.RespectBrowserAcceptHeader = true。它有如下作用：預設情況下，後臺會忽略瀏覽器傳來的AcceptHeader並返回應

asp.net部署上IIS後常見的十個錯誤

因為在 VS 2010 上跑就是正常，一佈署上 IIS 就掛。 ( 以下 10 個問題都是上了 iis 後才會出現錯的 ) 結果花了很多的時間找另外，若是想要知道更詳細的內容，請在 vs 2010 debug 的程式中外掛上 IE 和 IIS ( 也許有人會忘了它！

ASP.NET 兩種配置ORACLE資料庫的連線方式

ASP.NET 兩種配置ORACLE資料庫的連線方式 1.使用"connectionStrings"標籤定義 2.使用"appSettings"標籤定義 1.使用"connectionStrings"標籤定義在ASP.NET中的 W

史上最全的ASP.NET MVC路由配置，以後RouteConfig再弄不懂神仙都難救你啦~

繼續延續坑爹標題系列。其實只是把apress.pro.asp.net.mvc.4.framework裡的CHAPTER 13翻譯過來罷了，當做自己總結吧。內容看看就好，排版就不要吐槽了，反正我知道你也不會反對的。先說一下基本的路由規則原則。基本的路由規則是

淺析ASP.NET MVC路由配置

URL相關概念 http://example.com/albums/list.aspx 我們可以確定該站點的目錄中含有一個albums資料夾，並且在該資料夾下還有一個list.aspx

史上最全的ASP.NET MVC路由配置，以後RouteConfig再弄不懂神仙都難救你啦

繼續延續坑爹標題系列。其實只是把apress.pro.asp.net.mvc.4.framework裡的CHAPTER 13翻譯過來罷了，當做自己總結吧。內容看看就好，排版就不要吐槽了，反正我知道你也不會反對的。 XD 首先說URL的構造。其實這個也談不上構造，只是語

c# asp.net uploadify 上傳大檔案出現的 HTTP 404 問題

公司有個專案要求上傳附件大小限制在50MB，原本以為可以輕鬆搞定。在編譯模式下可以上傳大檔案，可是在IIS7下（自己架的伺服器），一上傳大的檔案就會出現 Http 404錯誤，偶爾有的檔案還有IO. error錯誤。一直搞不明白，在網上搜索大概瞭解上傳控制元件分為兩種上傳模式： 1，將檔案一次性讀到記憶體

ASP.NET 未能從配置檔案中指定的憑據建立 Windows 使用者標記

【問題描述】把水哥之前寫的教育廳專案程式碼拉到本地執行報配置錯誤：分析器錯誤訊息: 未能從配置檔案中指定的憑據建立 Windows 使用者標記。源自作業系統的錯誤“登入失敗: 未知的使用者名稱或錯誤密碼。行 12: <identity imper

解決 [Asp.net]Uploadify上傳大檔案報Http error 404 問題

引言之前使用Uploadify做了一個上傳圖片並預覽的功能，今天在專案中，要使用該外掛上傳大檔案。之前弄過上傳圖片的demo，就使用該demo進行測試。可以檢視我的這篇文章： [Asp.net]Uploadify所有配置說明,常見bug問題分析。大檔案上傳第一步：修改uploadify引數

Windows2008 iis ASP.net 4.0 配置

1.安裝web 伺服器（IIS）全部安裝，不在敘述 2.安裝Microsoft.NET4.0 不在敘述 3. 新增網站 4. 新增路徑，設定IP地址 5.設定ISAPTI和 CGI 6.允許4.0 7.應用程式池設定 8.改為 4.0 --經典

ASP.NET執行環境配置

以前弄過好多次，都沒有成功，昨天晚上不知怎麼地就成功了，借用我同學的一句話，這叫“靈光一閃”，廢話不多說了，這個成功是有圖有視訊有真相地哈！這篇博文發表都三個月了，我自認為算是很詳細了，可是還是很多人沒有配置出來（天天有人在群裡問我怎麼配置），所以今天特意錄成視訊供大家參考。特意申明：這是配置asp.ne

[Asp.net]Uploadify所有配置說明,常見bug問題分析

引言

專案結構

測試

總結

相關推薦