时间:2021-05-18
说说自己使用uploadify的一波三折的曲折过程:
之所以要选择uploadify,是源于自己先前使用过jQuery官网的上传文件插件,比较难用(页面写的代码比较多,IE下后台回传需要配置格式【不清楚其他上传插件是否也是这样】),而且一直有IE9上传不成功的问题,到我离开上家公司的时候也一直没有解决这个问题(可能是本人比较low的原因吧)。所以在使用插件之前先调研了一下。uploadify提供两个版本,flash的uploadify和html5的uploadFive。文档还是比较齐全的,网上的使用例子页比较多,配置页比较简单,所以第一选择就是他了。
1.初体验
uploadify的flash版本免费,而且根据以往的经验所有浏览器都支持flash的(这是悲剧的开始),所以计划只使用这个版本就行。
产品给的效果如下(有三个图片预览框,每一张图片有对应的描述,所以不能用一个上传按钮,每一个上传按钮上传对应的图片)
配置完毕后chrome自测通过(中间有个小曲折,产品那边想要多张图片一起上传,当时没有找到IE8展示的处理。后面再网上找到了一篇,然后录了下来图片上传前预览)。
要测试各个浏览器的情况,在Firefox上一看,我晕,Firefox最新的版本根本没有自带flash插件,结果就是连file input的样式都没有更改,完全没有作用。先前是想加入一段dom
<object data="xxx.swf" height="0" width="0"></object>
让浏览器检测到有flash文件弹出安装flash的提示。后来想一想不行啊,为了上传个文件让用户去装flash,太复杂了。
最后决定判断让支持html5的使用uploadiFive上传,不支持的才使用uploadify(flash)版本上传。
if(window.applicationCache){//支持html5
在配置uploadify的过程中遇到两个问题:
1.file input元素是有name属性的,但是使用flash后需要手动传递过去,也就是fileObjName这个属性,配置uploadiFive也需要传递这个name。
2.fileSizeLimit设置文件大小貌似没有起到作用。最后只能自己验证(onSelect事件中验证),验证失败也需要自己处理取消上传(因为我是配置了自动上传的'auto': true)
执行取消后还需要在onUploadError事件中截取这个取消事件导致触发视为onUploadError事件
下面是我的uploadify的配置
function init(opts){ var maxSize = 5242880;//1024 * 1024 * 5,5M $('#' + opts.fileObjName).uploadify({ 'fileSizeLimit ': maxSize, 'multi': false,//每次只能选择一个文件 'auto': true, 'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png', 'fileTypeDesc': '请选择图像或者视频', 'queueID': 'fileQueue', 'width': 200, 'height': 140, 'buttonText': '', 'fileObjName': opts.fileObjName,//需要修改文件名称 'swf': opts.swf, 'uploader': '/pcapi/user/uploadUserChangeCardImage.htm', 'onSelect' : function(file) { //有name表示是swf格式文件上传,html5文件上传参数请参考http://服务器下】)。我的原因是这个,我按照网上说的使用在服务器的根目录(主域名所在工程的根目录)下防止了crossdomain.xml,但是很遗憾没有管用(可能因为我们使用的服务器不是Apache服务器吧,网上有童鞋通过这个方案解决了这个跨域问题)。最终我的解决方案是不让其跨域,我将uploadify资源放在了主域名所在工程的根目录下,然后请求这个目录下的uploadify.swf文件。好了,最终终于能够上传文件了。最终是解决了上传的问题,花费的时间也不少,记录下来,希望后面有用uploadify的童鞋能够少走一些弯路。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。Uploadify官方网址:http:///,在MVC中使用的方法可以参考jQu
前言今天我们聊一聊图片上传,单张Or多张,如今,各大图片上传插件数不胜数,例如:Jquery的verupload.js,jQueryFileUpload、Upl
先了解了解Uploadify,具体内容如下Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定
使用方法: 1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋转插件),jquery.path.1.0.
给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法。摘录一段live简单使用方法。更多详情还见官网htt