'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要设置得不一样。
这个不是什么tab的问题,而是可能有多个上传的div或者input(含有相同的name或者ID)导致的
如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。
<div> <input type="file" multiple="true" /> </div> <a href="javascript:$('#total_upload').uploadify('upload', '*')">开始上传</a> <a href="javascript:$('#total_upload').uploadify('cancel', '*')">全部取消上传</a>
2).flash跨域导致(flash上传源码文件和页面所在的域不同【静态资源现在统一放在static.xxx.com服务器下】)。我的原因是这个,我按照网上说的使用在服务器的根目录(主域名所在工程的根目录)下防止了crossdomain.xml,但是很遗憾没有管用(可能因为我们使用的服务器不是Apache服务器吧,网上有童鞋通过这个方案解决了这个跨域问题)。最终我的解决方案是不让其跨域,我将uploadify资源放在了主域名所在工程的根目录下,然后请求这个目录下的uploadify.swf文件。好了,最终终于能够上传文件了。