今天又同事反映uploadify在Safari浏览器里不能上传和不能点击的,于是就去排查,由于对前端的经验不是很足,导致调试了很久都没有发现问题(这个可以略过),
第一个问题:layer与uploadify上传在Safari浏览器里点击没有反应和不能上传文件的原因,主要是由于浏览器的兼容性导致的,这个也是uploadify在Mozilla Firefox里也不能上传返回302的错误,这个是由于Safari和Firefox里都不能穿session的id给后端,导致系统认为不是同一个用户会报出错误。下面是解决的方法就是在上传的时候增加sesion_id
var formData={'type' : type,'field':Filedata,'path':path,'upload_allowext':upload_no_allowext,'upload_maxsize':upload_maxsize,'timestamp' : '<?php echo $timestamp;?>','token': "<?php echo md5('unique_salt' . $timestamp);?>",'PHPSESSID': "<?php echo session_id();?>"}; //增加session_id 信息 $('#file_upload').uploadify({ 'debug' : false, 'swf' : '__STATIC__/uploadify/uploadify.swf?ver=', //指定上传控件的主体文件 'uploader' : upload_url+'?jsessionid=<?php echo session_id();?>&ver='+Math.random(), //指定服务器端上传处理文件 'buttonText' : '选择文件', //上传按钮样式 'buttonClass' : 'glyphicon glyphicon-plus', //添加按钮class类 'auto' : false, //是否自动上传 'fileSizeLimit': parseInt(upload_maxsize), //允许文件大小KB,3M,否则最大100M 'uploadLimit' : parseInt(upload_maxnum),//可上载的文件的最大数目。 'queueSizeLimit' : parseInt(upload_maxnum), 'fileTypeExts' : upload_allowext, //文件类型 'height' : 36, //按钮高度 'queueID' : 'queue', //文件显示队列的DOM id 'formData' : formData, //额外发送数据 'fileObjName' : Filedata, //$_FILES['Filedata'] 'uploadScript' : upload_url, //服务器处理函数 'removeCompleted' : true, //移除上传的队列 'dnd' : true, //文件拖拽上传 'onUploadComplete' : function(file) { }, 'onSelect' : function(file) { var total_file=parseInt($("#total_file").html()); $("#total_file").html(total_file+1); }, 'onUploadStart' : function(filesToUpload){ indexA = parent.layer.load(2,{shade:[0.3,'#000']}); if($('#water').prop('checked')){ $("#file_upload").uploadify("settings", "formData", { "watermark": 1 }); } }, 'onUploadSuccess':function(file, data, response){ var json = $.parseJSON(data); //上传成功处理的。 }, 'onQueueComplete' : function(){ parent.layer.close(indexA); }, 'onUploadError':function(file, errorCode, errorMsg){ parent.layer.alert("上传失败:"+errorMsg+"=="+file.name+"=="+errorCode); } });
前端增加好了,那么后端用同样的处理方式,在获取使用到session的地方前面增加PHPSESSIONID标识是同一个用户
if(isset($_POST['PHPSESSID'])){ session_id($_POST['PHPSESSID']); }
第二个问题:uploadify在Safari 点击没反应,是由于浏览器的滚动条导致的,让你把滚动条拉到最低在点击选择文件按钮会发现无法点击,只有把滚动条拉到最上顶端才可以继续点击。这个是由于layer增加了一个fixed的功能,默认是true,导致页面都固定在上面了,不会随着滚动条移动而移动,现在只需要吧fixed的参数改为false就可以正常了。
/** * [dialogIframe iframe弹窗] * @param {[type]} url [iframe地址] * @param {[type]} title [标题] */ function dialogIframe(url,title){ var url = url + "?iframe=" + window.name+"&ver="+Math.random(); layer.open({ title:title, type:2, area: ['60%','480px'], maxmin:true, zIndex:1989101400, scrollbar:false, shadeClose:true, fixed:false, content:url }); }