在浏览器中没有闪存时上传废墟文件上传

时间:2011-02-28 00:24:11

标签: html flash file-upload uploadify

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

即使在Uploadify官方演示中(截至今天,28.2.2011),您也可以看到此行为:

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

有人找到了解决这个问题的方法吗? 干杯


在安装闪光灯的情况下,这些都不起作用,但是被禁用! 例如,这一行:

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

表现相同的天气闪光灯已安装并启用,或已安装和禁用! 我想过获取uploadify API并检查它,但我找到了零例子,任何想法?

11 个答案:

答案 0 :(得分:3)

我使用 onSWFReady 事件,如果当然禁用了Flash,则不会触发该事件。我删除包含本机文件输入的块并显示uploadify div如果加载了swf,就像魅力一样:

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

答案 1 :(得分:3)

如果您使用的是最新版本的uploadify,则可以使用onFallback事件来检测是否安装了闪存(或者是否支持所需的闪存版本的闪存):

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

答案 2 :(得分:2)

我认为jQuery File Upload是一个很好的解决方案。

  

特点:

     
      
  1. 多个文件上传
  2.   
  3. 拖动&放弃支持
  4.   
  5. 上传进度条
  6.   
  7. 可取消上传
  8.   
  9. 可恢复上传
  10.   
  11. 分块上传
  12.   
  13. 预览图片
  14.   
  15. 无需浏览器插件(例如Adobe Flash)
  16.   
  17. 旧版浏览器的优雅回退
  18.   
  19. HTML文件上传表单后备
  20.   
  21. 跨站点文件上传
  22.   
  23. 多个插件实例
  24.   
  25. 可自定义且可扩展
  26.   
  27. 分段和文件内容流上传
  28.   
  29. 与任何服务器端应用程序平台兼容
  30.   

答案 3 :(得分:2)

以下是我解决这个问题的方法。我添加到我的代码中:

<!--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按钮上,这样如果浏览器没有安装闪存,则显示“Get Flash Player”按钮而不是uploadify按钮。

安装了Flash播放器后,“Get Flash Player”按钮会消失,因为该对象的宽度和高度设置为0.

答案 4 :(得分:1)

我很惊讶上传不会优雅地降级,这似乎是一个关键要求。如果你不想自己解决这个问题,你可以使用一个在没有Flash的情况下提供回退的库。

http://swfupload.org/

  

SWFUpload是一个小型JavaScript / Flash库,可以充分利用这两个世界。它具有Flash的强大上传功能以及HTML / CSS的可访问性和易用性。

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

答案 5 :(得分:1)

我也非常满意plupload(http://www.plupload.com/)。它支持HTML 5,Flash,Silverlight,Google齿轮和HTML 4。

答案 6 :(得分:1)

我的解决方案适用于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' />

如果未安装或禁用所需的Flash版本,则会触发onFallback事件。如果发生这种情况,我'销毁'uploadify实例,将其重置回基本的HTML表单。

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

答案 7 :(得分:0)

我遇到了同样的问题并使用Javascript Flash Detection Library解决了这个问题。这是一个小脚本文件,允许您检查当前安装的Flash Player版本。

答案 8 :(得分:0)

为什么不能执行以下操作(假设您有swfobject)?

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

如果检测到闪存,则会执行uploadify脚本。否则,它会正常降级为标准浏览器文件输入。

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

答案 9 :(得分:0)

这适用于未安装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(如果已安装则启用它)
- 隐藏在上载源脚本失败时出现的通用FileUpload

IMHO Uploadify仍然优于其他上传者作为替代品,因为它是唯一一个在非HTML5浏览器中提供多个文件选择的人,其遗憾的是在Win7上包含IE9。所有其他上传器只允许在文件对话框中选择单个文件。

编辑:在慢速连接上,在上传脚本有机会运行之前,将显示No 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>

答案 10 :(得分:0)

似乎旧的uploadify有一个

flashVer=-1;

在它的代码中,后来它对其进行了拆分,但在未安装 Flash 时失败。改为:

flashVer="-1";

解决了经典 HTML 回退的问题(尽管只上传单个文件 - 在这种情况下必须放置多个这样的文件,并确保您的 onCompleteAll 事件处理程序逻辑不会失败,而是通知其他对象它已完成以及何时所有 onCompleteAll为每个这样的上传控件调用你可以做任何你之前在 onCompleteAll 做的逻辑