uploadify使用的一些经验总结
说说自己使用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)
//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');
执行取消后还需要在onUploadError事件中截取这个取消事件导致触发视为onUploadError事件
'onUploadError': function(file, errorCode, errorMsg, errorString) {
if(errorCode != -280){//取消上传的错误码是-280
$.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
}
}
下面是我的uploadify的配置
/*
依赖于jQuery和$.dialog
opts = {
fileObjName:'idCardPositive',
swf: 'uploadify/uploadify.swf',
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
}
*/
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://www.uploadify.com/documentation/uploadifive/onselect-2/
//需要检测文件类型和大小
if(opts.checkFile(file)){
opts.normalOnSelect(opts.positionClass);
}else{
//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');
}
},
'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
opts.showProgress(bytesUploaded/bytesTotal);
},
'onUploadError': function(file, errorCode, errorMsg, errorString) {
if(errorCode != -280){//取消上传的错误码是-280
$.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
}
},
'onUploadSuccess': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
}
});
}
在配置uploadiFive的时候遇到一个问题:
1.fileTypeExts设置为“*.jpg;*.bmp;*.jpeg;*.png”,但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于onSelect的参数queue没有文件类型信息:点击查看。所以只能在onAddQueueItem事件中检测,然后在onSelect中取消上传队列queue来取消文件的自动上传
'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
},
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
}else{
$('#' + opts.fileObjName).uploadifive('clearQueue');
}
},
可能还有一个问题是需要配置'fileType': 'image/*',因为我直接设置了,不知道不设置会不会有问题,没试
下面是我的uploadiFive配置
/*
依赖于jQuery和$.dialog
opts = {
fileObjName:'idCardPositive',//name和id相同
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(positionClass){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
}
*/
function init(opts){
var fileCheckResult = true;
var maxSize = 5242880;//1024 * 1024 * 5,5M
$('#' + opts.fileObjName).uploadifive({
'fileSizeLimit ': maxSize,
'multi': false,//每次只能选择一个文件
'auto': true,/*如果是自动上传,那上传按钮将没用了*/
'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
'fileTypeDesc': '请选择图像或者视频',
'queueID': 'fileQueue',
'width': 200,
'height': 140,
'buttonText': '',
'fileObjName': opts.fileObjName,//需要修改文件名称
'dnd': false,//不允许拖拽
'fileType': 'image/*',
'uploadScript': '/pcapi/user/uploadUserChangeCardImage.htm',
'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
},
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
}else{
$('#' + opts.fileObjName).uploadifive('clearQueue');
}
},
'onProgress': function(file, e) {
opts.showProgress(e.loaded / e.total);
},
'onError': function(file, errorCode, errorMsg, errorString) {
$.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
},
'onUploadComplete': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
}
});
}
2.当头棒喝
本地测试OK以后,放到测试环境上去测试,马上被震惊了。
遇到的第一个问题就是在IE下很多时候点击没有反应(没有弹出文件选择框),找了半天原因终于找到了:必须在文档准备完全的时候再去初始化uploadify,而且确保上传input是可用的(非display:none)
好了,可以选择文件了,但是选择文件以后IE8/9总是抛出call to startUpload failed异常,去网上查了一下,主要有几个原因
1.而是可能有多个上传的div或者input(含有相同的name或者ID)导致的,如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。
2.flash跨域导致(flash上传源码文件和页面所在的域不同【静态资源现在统一放在static.xxx.com服务器下】)。我的原因是这个,我按照网上说的使用在服务器的根目录(主域名所在工程的根目录)下防止了crossdomain.xml,但是很遗憾没有管用(可能因为我们使用的服务器不是Apache服务器吧,网上有童鞋通过这个方案解决了这个跨域问题)。最终我的解决方案是不让其跨域,我将uploadify资源放在了主域名所在工程的根目录下,然后请求这个目录下的uploadify.swf文件。好了,最终终于能够上传文件了。
最终是解决了上传的问题,花费的时间也不少,记录下来,希望后面有用uploadify的童鞋能够少走一些弯路。
如果觉得本文不错,请点击右下方【推荐】!
uploadify使用的一些经验总结的更多相关文章
- uploadify插件Http Error(302)错误记录(MVC)
由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- 基于MVC4+EasyUI的Web开发框架经验总结
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图 标,从而是Web系统 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理
在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率.我在较早时期的EasyUI的Web框架上, ...
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象, ...
随机推荐
- Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用
通过本文你将学会如下内容: 1,如何使用Xamarin开发跨平台(Windows,Android,iOS)应用. 2,如何使用微软的登录界面登入Microsoft账号. 3,如何使用Outlook邮箱 ...
- CSS垂直居中的11种实现方式
今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- 【云知道】LoadRunner 录制问题集锦
关键词:各路录制小白汇集于此 虽然知道君对录制不感冒,但总是看到扎堆的人说这些问题,忍不住要站出来了. 百度虽好,帮助了很多小白,但关键是百度并没有排除错误内容,经过历史的几年传播,错的都快变对的了, ...
- 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现
本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...
- 云计算下PAAS的解析一
云计算下PAAS的解析一 PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...
- TYPESDK手游聚合SDK服务端设计思路与架构之一:应用场景分析
TYPESDK 服务端设计思路与架构之一:应用场景分析 作为一个渠道SDK统一接入框架,TYPESDK从一开始,所面对的需求场景就是多款游戏,通过一个统一的SDK服务端,能够同时接入几十个甚至几百个各 ...
- windows 7(32/64位)GHO安装指南(序篇)~
大家好,本人是高三刚毕业,即将踏入校园的程序猿~我写这篇文章呢,主要是想巩固一下之前对于电脑的基础知识理论,也希望能帮助没有电脑基础的同学能维护一下自己的电脑,要是能帮助女生修电脑那就是更好啦~~哈哈 ...
- 烂泥:jira7.2安装、中文及破解
. jira的主要配置文件,存放在/opt/atlassian/jira/conf/server.xml文件中,如下: vim /opt/atlassian/jira/conf/server.xml ...
- SQLSERVER中NULL位图的作用
SQLSERVER中NULL位图的作用 首先感谢宋沄剑提供的文章和sqlskill网站:www.sqlskills.com,看下面文章之前请先看一下下面两篇文章 SQL Server误区30日谈-Da ...