layer与uploadify上传在Safari浏览器里点击没有反应和不能上传文件的原因

今天又同事反映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
		
    });
}


本文永久地址:http://www.huanghaiping.com/article/63.html
本文出自 黄海平博客 ,转载时请注明出处及相应链接。

发表我的评论
  

网友最新评论 (1)

  1. 可以要資源碼嘛?
    may2017-12-01 回复
返回顶部