Html 当浏览器中没有flash时，Uploadify会破坏文件上载

我有一个带有文件上传元素的HTML表单，它基于Uploadify。 不幸的是，如果浏览器没有安装/启用flash（我在Chrome和Safari上测试过），那么文件上传元素将完全消失，而我希望至少有普通的、常规的文件上传html元素作为后备

您甚至可以在Uploadify官方演示中看到这种行为（截至2011年2月28日）：

有人找到了解决办法吗？ 干杯

---

在安装了闪存但被禁用的情况下，这些功能都不起作用
例如，这一行：

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

行为与安装和启用或安装和禁用天气闪光灯相同

---

我曾想过获取uploadify API并检查它，但我没有发现任何示例，有什么想法吗？

我很惊讶uploadify没有优雅地降级，这似乎是一个关键要求。如果你不想自己解决这个问题，你可以使用一个库，当Flash不存在时，它确实提供了一个后备方案

SWFUpload是一个小型JavaScript/Flash库，可以充分利用这两个方面。它的特点是Flash强大的上传功能以及HTML/CSS的易访问性和易用性

• 通过在对话框中按住ctrl/shift键同时上载多个文件
• 所有事件的Javascript回调
• 在开始上载之前获取文件信息
• 使用XHTML和css设置上载元素的样式
• 使用HTML上载文件时显示信息
• 无需重新加载页面
• 适用于所有支持Flash的平台/浏览器
• 如果Flash或javascript不可用，则会优雅地降级为正常的HTML上传格式
• 开始上载前控制文件大小
• 仅在对话框中显示选定的文件类型
• 队列上载，在开始上载之前删除/添加文件

---

我对plupload也很满意(http://www.plupload.com/). 它支持HTML5、Flash、Silverlight、GoogleGears和HTML4。

我也遇到过同样的问题，并使用。这是一个小脚本文件，允许您检查当前安装的Flash Player版本

我认为这是一个很好的解决方案

特点：

多文件上传

拖放支持

上传进度条

可取消上载

可恢复上传

分块上传

预览图像

不需要浏览器插件（如Adobe Flash）

传统浏览器的优雅回退

HTML文件上传表单回退

跨站点文件上载

多个插件实例

可定制和可扩展

多部分和文件内容流上载

与任何服务器端应用程序平台兼容

---

下面是我如何解决这个问题的。我在代码中添加了：

<!--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，就会显示“Get Flash Player”按钮，而不是uploadify按钮

---

安装flash player后，“获取flash player”按钮将消失，因为对象的宽度和高度设置为0

我使用onSWFReady事件，当然，如果禁用闪存，则不会触发该事件。我删除了包含本机文件输入的块，并显示uploadify div（如果加载了swf），它的工作方式很有魅力：

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

---

为什么不能执行以下操作（前提是您有swfobject）

如果检测到flash，将执行uploadify脚本。否则，它将优雅地降级为标准浏览器文件输入

---

我在Chrome/FireFox/Safari/IE7/IE8中对此进行了测试，效果很好。

如果您使用的是uploadify的最新版本，则可以使用onFallback事件检测是否安装了flash（或者是否支持所需的flash版本）：

---

我的解决方案在IE6、IE9、Firefox、Chrome和Safari中工作，启用、禁用或未安装Flash

我从一个基本的HTML文件上传表单开始：

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

---

这适用于未安装闪存和已安装但已禁用的闪存。我只在IE7-9和FF19中确认了这一点，但应该可以在任何可以使用Uploadify SWF版本的浏览器中使用

在html中有2个div。一个用于无闪光灯，另一个用于带闪光灯

<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>

如果未安装Flash，或已安装但未启用Flash，则将显示uploadifyNoFlashDiv div，否则OnInit将隐藏uploadifyNoFlashDiv div并显示uploadifyHasFlashDiv div，假定其他一切正常，该div将呈现Uploadify控件

如果用户不安装Flash，这当然不会提供任何功能，但它至少提供了
-显示适当的消息，建议他们需要安装闪存（如果已经安装，则启用闪存）
-隐藏Uploadify脚本失败时显示的通用文件上载

IMHO Uploadify仍然优于作为替代方案提到的其他上传程序，因为它是唯一一个在非HTML5浏览器中提供多文件选择的上传程序，不幸的是，它包括Win7上的IE9。所有其他上载程序只允许在“文件”对话框中选择单个文件

编辑：在慢速连接上，在Uploadify脚本有机会运行之前，将显示未安装Flash的div，如果用户确实安装了Flash，则用户会感到困惑，并且div最终将被隐藏。在此场景中，添加另一个带有加载gif的div，然后在文档加载时运行一些脚本以显示相应的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>

加载。请等一下。。。

闪存未安装或未启用

文件上载要求安装并启用闪存。

单击以安装

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

<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>

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

<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>

flashVer=-1;

flashVer="-1";