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