解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload

发布时间：2020-12-16 01:48:21 所属栏目：百科来源：网络整理

导读：在web页面中常常使用文件上传功能，如果在页面中使用input type="file"/默认的文件输入框和选择按钮，那么样式看起来很丑，而且不同的浏览器中样式不一样。所以很多开发人员喜欢把文件类型的输入框采用display:none隐藏了，采用自定义的输入框和选择按钮，这

在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" onchange="fileChange()" />	'+	
			'<button type="button" class="btn btn-primary" onclick="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" onchange="fileChange()" />			'+			
				<input id="photoCover" class="form-control" type="text">'+
				<button type="button" class="btn btn-primary" onclick="$('#payfile').click();" id="selectfile" '+style="margin-left: 200px;">选择文件</button>'+
				<button type="button" class="btn btn-primary" onclick="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("系统异常，请重新再试！");
					}
			}
		}
	});
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!