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

前端之家收集整理的这篇文章主要介绍了解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload不能上传问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在web页面中常常使用文件上传功能,如果在页面中使用<input type="file"/>默认的文件输入框和选择按钮,那么样式看起来很丑,而且不同的浏览器中样式不一样。所以很多开发人员喜欢把文件类型的输入框采用display:none隐藏了,采用自定义的输入框和选择按钮,这样看起来与页面整体风格比较统一而且美观。但是如果采用ajaxFileUpload
异步进行上传的话,在Safari、IE高版本中就会上传失败。那么问题改怎么解决呢?
解决方法

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

  1. function bpfile()
  2. {
  3. var userAgent = navigator.userAgent;
  4. var browser=navigator.appName;
  5. /**判断是否是Safari和IE浏览器*/
  6. if(userAgent.indexOf("Safari") > -1||browser=="Microsoft Internet Explorer")
  7. {
  8. $("#bpfile").html('<label style="display: block;">图片文件:</label> '+
  9. '<input class="form-control" type="file" id="payfile" name="payfile" onchange="fileChange()" /> '+
  10. '<button type="button" class="btn btn-primary" onclick="ajaxUpload();" id="upload" style="margin-left: 200px;">上传文件</button>');
  11. } else
  12. {
  13. /**如果不是就采用自定义的选择按钮和文件输入框*/
  14. $("#bpfile").html('<label style="display: block;">图片文件:</label> '+
  15. <input class="form-control" type="file" style="display:none" id="payfile" name="payfile" onchange="fileChange()" /> '+
  16. <input id="photoCover" class="form-control" type="text">'+
  17. <button type="button" class="btn btn-primary" onclick="$('#payfile').click();" id="selectfile" '+style="margin-left: 200px;">选择文件</button>'+
  18. <button type="button" class="btn btn-primary" onclick="ajaxUpload();" id="upload">上传文件</button>');
  19. }
  20. }

附带ajaxFileUpload实现异步上传文件的js:
  1. $.ajaxFileUpload({
  2. //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
  3. url : '<%=request.getContextPath()%>/common/bpupload',secureuri : false,//是否启用安全提交,默认为false
  4. fileElementId : 'payfile',//文件选择框的id属性
  5. dataType:"text",//数据类型
  6. success : function(data) {
  7. //上传成功后返回结果
  8. },error : function(data){
  9. //上传失败后执行方法
  10. }
  11. });
  12. }else
  13. {
  14. $("#showLoad").modal("hide");
  15. $("#false").show();
  16. $("#errortips").html("系统异常,请重新再试!");
  17. }
  18. }
  19. }
  20. });
  21. }

猜你在找的Ajax相关文章