我有一个带有文件上传元素的HTML表单,该表单基于Uploadify。 不幸的是,如果浏览器没有安装/启用闪存(我在Chrome和Safari上测试过),那么文件上传元素完全消失,而我本来希望至少有普通的,常规的,文件上传html元素作为后备。
即使在Uploadify官方演示中(截至今天,28.2.2011),您也可以看到此行为:
http://www.uploadify.com/demos/
有人找到了解决这个问题的方法吗? 干杯
在安装闪光灯的情况下,这些都不起作用,但是被禁用! 例如,这一行:
if (swfobject.getFlashPlayerVersion().major === 0)
表现相同的天气闪光灯已安装并启用,或已安装和禁用! 我想过获取uploadify API并检查它,但我找到了零例子,任何想法?
答案 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是一个很好的解决方案。
特点:
- 多个文件上传
- 拖动&放弃支持
- 上传进度条
- 可取消上传
- 可恢复上传
- 分块上传
- 预览图片
- 无需浏览器插件(例如Adobe Flash)
- 旧版浏览器的优雅回退
- HTML文件上传表单后备
- 跨站点文件上传
- 多个插件实例
- 可自定义且可扩展
- 分段和文件内容流上传
- 与任何服务器端应用程序平台兼容
醇>
答案 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的情况下提供回退的库。
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 做的逻辑