Uploadify當文件上傳時，無瀏覽器的文件上傳

Question

我有一個帶有文件上傳元素的HTML表單，它基於Uploadify。 不幸的是，如果瀏覽器沒有安裝/啓用Flash（我在Chrome和Safari上測試過），那麼文件上傳元素是完全消失，而我本來希望至少有普通，常規，文件上傳html元素作爲後備。

可以在Uploadify官方演示甚至看到此行爲（如今天，2011年2月28日的）：

http://www.uploadify.com/demos/

任何人都找到了自己的方式解決此問題？ 乾杯

---

沒有在那一剎那安裝情況下，這些工作，但被禁用！
例如，該行：

if (swfobject.getFlashPlayerVersion().major === 0) 

行爲相同的天氣閃光燈安裝並啓用，或安裝和殘疾人！
我想過要獲取uploadify API並檢查它，但我找到了零例子，有什麼想法？

Answer 1

我很驚訝Uploadify不會優雅地降級，它似乎是一個關鍵要求。如果你不想自己解決這個問題，你可以使用一個庫，當Flash不存在時，它可以提供回退。

http://swfupload.org/

SWFUpload的是一個小型的JavaScript/Flash庫得到兩全其美。它具有Flash的強大上傳功能以及HTML/CSS的易用性和易用性。

• 上傳一次多個文件，按ctrl /移選擇對話框
• 的Javascript回調在所有事件
上傳前
• 獲取文件信息開始
• 用XHTML風格上傳元素和CSS
• 顯示使用HTML上傳文件時的信息
• 無需重新加載頁面
• 適用於所有平臺/瀏覽器的Fla支持。
• 緩慢下降到正常的HTML上傳表單如果Flash或JavaScript是不可用
• 控制文件大小上載開始之前
• 僅顯示在對話框
• 隊列上傳所選的文件類型，刪除/開始上傳
之前添加文件

Answer 2

我也一直很喜歡plupload（http://www.plupload.com/）。它支持HTML 5，Flash，Silverlight，谷歌齒輪和HTML 4.

Answer 3

我有同樣的問題，並使用Javascript Flash Detection Library解決它。這是一個小腳本文件，允許您檢查當前安裝的Flash Player版本。

Answer 4

我認爲jQuery File Upload是一個很好的解決方案。

特點：

1. 多文件上傳
2. 將&拖放支持
3. 上傳進度條
4. 可取消上傳
5. 斷點續傳
6. 分塊上傳
7. 預覽圖像
8. 沒有瀏覽器插件（例如的Adobe Flash）需要
9. 舊版瀏覽器優美后備
10. HTML文件上傳表單後備
11. 跨站點文件上傳
12. 多個插件實例
13. 定製和可擴展
14. 多部分和文件內容流上傳
15. 兼容任何服務器端應用平臺

Answer 5

以下是我如何解決這個問題。我添加到我的代碼：

<!--Flash Fallback--> 
<div> 
    <object type="application/x-shockwave-flash" width="0" height="0"> 
    <a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a> 
    </object> 
</div> 

然後我將其定位絕對超過了uploadify按鈕，以便「獲得Flash播放器」顯示uploadify按鈕的按鈕，而不是如果瀏覽器沒有安裝Flash。

一旦安裝Flash Player，在「下載安裝Flash Player」現在按鈕消失對象具有寬度和高度設置爲0

Answer 6

我使用onSWFReady事件，這是不是如果Flash觸發當然是禁用的。我刪除包含原始文件輸入模塊和顯示uploadify DIV如果SWF加載，就像一個魅力：

onSWFReady: function() { 
    $('#property-post .upload .browse').remove(); 
    $('#uploadify').css('display', 'block'); 
} 

Answer 7

爲什麼你不能做到以下幾點（前提是你有swfobject的）？

if(swfobject.getFlashPlayerVersion().major > 0) 
    //uploadify code here... 
} 

如果檢測到閃光，則執行uploadify腳本。否則，它將優雅地降級到標準瀏覽器文件輸入。

我在Chrome/FireFox/Safari/IE7/IE8中測試了它，它工作得很好。

Answer 8

如果您使用的是最新版本的uploadify可以使用onFallback事件來檢測是否安裝了閃光燈（或是否支持閃存所需的Flash版本）：

$("#file_upload").uploadify({ 
    'swf'  : '/uploadify/uploadify.swf', 
    'uploader' : '/uploadify/uploadify.php', 
    'onFallback' : function() { 
     alert('Flash was not detected or flash version is not supported.'); 
    } 
}); 

Answer 9

我的解決方案適用於IE6 ，IE9，Firefox，Chrome和Safari，並啓用了Flash，已禁用或未安裝Flash。

我開始一個基本的HTML文件上傳表單：當需要的Flash版本未安裝或已禁用

<input id='f_file' name='f_file' type='file' /> 
<input id='f_submit' name='f_submit' type='submit' value='Upload' /> 

的onFallback事件。如果發生這種情況，我會'銷燬'uploadify實例，將其重置爲基本的HTML表單。

'onFallback' : function() { 
    $("#f_file").uploadify("destroy"); 
} 

Answer 10

這適用於未安裝Flash和安裝Flash但已禁用。我只在IE7-9和FF19中確認過它，但應該可以在任何可以使用Uploadify SWF版本的瀏覽器中使用。

在html中有2個div。一個沒有Flash和與Flash

<div id="uploadifyDiv" runat="server" style="float: left; width: 100%; margin-top: 10px;"> 
    <div id="uploadifyNoFlashDiv"> 
    <p style="font-weight:bold; background-color:Red; color:Black;">Flash is not installed or is not enabled</p>  
    File upload requires Flash to be installed and enabled.<br /> 
    Click <a href="http://get2.adobe.com/flashplayer/" target="_blank">here</a> to install<br /> 
    You will need to <a href="javascript:window.location.href=window.location.href">refresh</a> the page when installation is completed</p> 
    </div> 
    <div id="uploadifyHasFlashDiv" style="display:none;"> 
    <asp:FileUpload ID="ImageFileUpload" runat="server" /> 
    </div> 
</div> 

在Uploadify腳本包括OnInit的

onInit : function(instance) { 
    $('[id$="uploadifyNoFlashDiv"]').css('display','none'); 
    $('[id$="uploadifyHasFlashDiv"]').css('display','block');}, 

如果沒有安裝Flash或已安裝但尚未啓用的功能，那麼uploadifyNoFlashDiv DIV將顯示，否則OnInit將隱藏uploadifyNoFlashDiv div並顯示uploadifyHasFlashDiv div，假設其他一切正常，將渲染Uploadify控件。

這當然不提供任何功能，如果用戶沒有安裝Flash，但它至少
- 顯示相應的消息通知他們需要安裝Flash（或啓用它，如果已經安裝）
- 隱藏如果Uploadify腳本失敗，則會出現通用的FileUpload

恕我直言，Uploadify仍然優於其他上傳者作爲替代品，因爲它是唯一一個在非HTML5瀏覽器中提供多個文件選擇，可悲的是包括IE9在Win7上。所有其他上傳者只允許在文件對話框中選擇單個文件。

編輯：在慢速連接上，在Uploadify腳本有機會運行時，如果他們確實安裝了Flash並且div最終會隱藏，則會顯示No Flash已安裝的div。在這種情況下，添加另一個div，並在其中加載gif，然後在文檔加載上運行一些腳本以顯示相應的div。

<div id="uploadifyDiv" runat="server" style="float: left; width: 100%; margin-top: 10px;"> 
    <div id="uploadifyNoFlashDiv" runat="server" class="infoBoxDiv" style="display: block;"> 
     <div id="uploadifyNoFlashLoadingDiv" style="display:block"> 
      <img src="../images/uploading.gif" alt="Loading ..." /> Loading. Please wait a moment ... 
     </div> 
     <div id="uploadifyNoFlashFinalDiv" style="display:none;"> 
      <p style="font-weight: bold; background-color: Red; color: Black;"> 
       Flash is not installed or is not enabled</p> 
      <p> 
       File upload requires Flash to be installed and enabled.<br /> 
       Click <a href="http://get2.adobe.com/flashplayer/" target="_blank">here</a> to install<br /> 
       You will need to <a href="javascript:window.location.href=window.location.href">refresh</a> 
       the page when installation is completed 
      </p> 
     </div> 
    </div> 
    <div id="uploadifyHasFlashDiv" runat="server" style="display: none;"> 
     <asp:FileUpload ID="ImageFileUpload" runat="server" /> 
    </div> 
</div> 

<script language="javascript" type="text/javascript"> 
    // If the NoFlashDiv is still visible then hide the loading gif and show the info box 
    // Otherwise leave alone and the Uploadify script will do its thing 
    $(document).ready(function() { 
     if ($('[id$="uploadifyNoFlashDiv"]').css('display') == 'block') 
     { 
      $('[id$="uploadifyNoFlashLoadingDiv"]').css('display','none'); 
      $('[id$="uploadifyNoFlashFinalDiv"]').css('display','block'); 
     }     
    }); 
</script>