解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload不能上传问题

         在web页面中常常使用文件上传功能,如果在页面中使用<input type="file"/>默认的文件输入框和选择按钮,那么样式看起来很丑,而且不同的浏览器中样式不一样。所以很多开发人员喜欢把文件类型的输入框采用display:none隐藏了,采用自定义的输入框和选择按钮,这样看起来与页面整体风格比较统一而且美观。但是如果采用ajaxFileUpload
异步进行上传的话,在Safari、IE高版本中就会上传失败。那么问题改怎么解决呢?
   解决方法

        在页面加载完成后对浏览器进行判断,如果是Safari、IE浏览器,就采用浏览器默认的文件选择文件按钮样式。js代码如下:

 function bpfile()
  {	
	var userAgent = navigator.userAgent; 
	var browser=navigator.appName;
	/**判断是否是Safari和IE浏览器*/
	if(userAgent.indexOf("Safari") > -1||browser=="Microsoft Internet Explorer") 
	{ 
		$("#bpfile").html('<label style="display: block;">图片文件:</label> '+
			'<input class="form-control" type="file" id="payfile" name="payfile" οnchange="fileChange()" />	'+	
			'<button type="button" class="btn btn-primary" οnclick="ajaxUpload();" id="upload" style="margin-left: 200px;">上传文件</button>');
	} else
	{
		/**如果不是就采用自定义的选择按钮和文件输入框*/
			$("#bpfile").html('<label style="display: block;">图片文件:</label> '+
				<input class="form-control" type="file" style="display:none" id="payfile" name="payfile" οnchange="fileChange()" />			'+			
				<input id="photoCover" class="form-control" type="text">'+
				<button type="button" class="btn btn-primary" οnclick="$('#payfile').click();" id="selectfile" '+style="margin-left: 200px;">选择文件</button>'+
				<button type="button" class="btn btn-primary" οnclick="ajaxUpload();" id="upload">上传文件</button>');
	}
}

附带ajaxFileUpload实现异步上传文件的js:

$.ajaxFileUpload({
		//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
		url : '<%=request.getContextPath()%>/common/bpupload',
		secureuri : false, //是否启用安全提交,默认为false 
		fileElementId : 'payfile', //文件选择框的id属性
		dataType:"text",//数据类型
		success : function(data) {
			//上传成功后返回结果
							
						},
		error : function(data){
			//上传失败后执行方法	
						}
					});
					
				}else
					{
					$("#showLoad").modal("hide");
					$("#false").show();
					$("#errortips").html("系统异常,请重新再试!");
					}
			}
		}
	});
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值