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的童鞋可以少走一些弯路。

 

　　若是以为本文不错，请点击右下方【推荐】！