导入部分

<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

HTML部分

<fieldset class="layui-elem-field layui-col-xs12 margin20">
  <legend>监控点校验</legend>
    <div class="layui-col-xs12" style='padding: 10px;'>
      <form enctype="multipart/form-data" id="batchUpload" action="上传地址" method="post" class="form-horizontal">
        <input id="uploadEventPath" class="fileInp" disabled="disabled" type="text" placeholder="请选择excel文件"/>
        <input type="file" name="file" id="uploadEventFile" style="position: absolute;width: 5%;cursor: pointer;opacity: 0;filter: alpha(opacity=00);height:30px;"/> //隐藏file文件上传按钮
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm chooseB" id="uploadEventBtn" style="cursor: pointer;">选择文件</button>
      </form>
      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm chooseB" id="jy">上传校验</button>
  </div>
</fieldset>

JS部分

<script type="text/javascript">
layui.use(['form', 'layer','table'], function () {
var form = layui.form,layer = layui.layer,table = layui.table;
var loading;
$("#uploadEventFile").bind("change", function() {
$("#uploadEventPath").attr("value",$("#uploadEventFile").val());
});
$("#jy").click(function(){
var uploadEventFile = $("#uploadEventFile").val();
if (uploadEventFile == "") {
layer.alert("请选择excel文件,再上传!");
} else if (uploadEventFile.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
layer.alert("只能上传Excel文件!");
}else if (uploadEventFile.lastIndexOf("abc.xlsx") < 0) {//可判断以.xls和.xlsx结尾的excel
layer.alert("文件名称必须是 “abc.xlsx” 请更改文件名称!");return false;
}else{
loading = layer.msg("数据加载中,请稍候...", {icon : 16,shade : 0.4,time : 10000});
$("#batchUpload").ajaxSubmit({//jquery.form 兼容ie8文件上传
type:"post",
url:"url地址",
dataType:"json",
success:function(result){
layer.close(loading);
console.log(result);
},
error:function(data){
layer.alert("系统错误,请联系管理员!");
},
});
}
});
});
</script>

报错处理

在IE8浏览器中,如果报错 “拒绝访问”,这个时候是因为在ie中除非你点击file控件的浏览按钮,否则是没有权限去上传文件的,也就是说不可以通过js来控制file控件value的方法上传文件。如果觉得file难看的话,可以动过css样式来隐藏file,以及一些处理来使file变得好看些。

以上就是完整的代码。在IE891011以及搜狗浏览器中(极速模式和IE模式)测试通过。

仅做记录。

jquery.form 兼容IE89文件上传的更多相关文章

  1. 考虑浏览器兼容的文件上传(IE8不支持FormData)

    方法一:使用FormData(因IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器) 也可参考文章 http://www.jianshu.com/p/46e6e0 ...

  2. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  3. 使用jquery的ajax提交文件上传

    以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...

  4. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  5. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  6. jQuery的ajax实现文件上传大小限制

    用jquery的ajax实现简单的文件上传功能,并且限制文件大小,先上代码. <!DOCTYPE html> <html> <head> <meta char ...

  7. Django 基于Ajax & form 简单实现文件上传

    前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...

  8. jquery uploadify插件多文件上传

    1.jquery uploadify 下载:http://www.uploadify.com/ 2.安装:解压后拷贝的工程目录下面,如:WebRoot/uploaddify 3.配置项说明: uplo ...

  9. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

随机推荐

  1. .net core系列源码地址介绍

    很早就想写.net core相关教程内容了,但是一方面感觉东西太多了,一方面是太懒了,最近才下定决心,一定要写点东西出来,希望能支持一下国内.net 的尴尬处境 好了,先从.net core开源开始吧 ...

  2. Linux下如何部署FTP服务器

    FTP 是 File Transfer Protocol 的缩写,即文件传输协议,它通过网络在服务器和客户端之间传输文件,现在已经成为一种广泛使用的标准工具 vsftpd 是 very secure ...

  3. python requests发起请求,报“Max retries exceeded with url”

    需要高频率重复调用一个接口,偶尔会出现"Max retries exceeded with url" 在使用requests多次访问同一个ip时,尤其是在高频率访问下,http连接 ...

  4. 详解nginx的请求限制(连接限制和请求限制)

    https://www.jb51.net/article/143682.htm 一,背景 我们经常会遇到这种情况,服务器流量异常,负载过大等等.对于大流量恶意的攻击访问,会带来带宽的浪费,服务器压力, ...

  5. MYSQL实现上一条下一条功能

    select id from(select *, (@i:=@i+1) as rownum from pre_bet_zhibo,(select @i:=0) as itwhere link_cone ...

  6. spring cloud --- config 从git 获取文件【 可能是yml或 properties】遇到有相同字段的取值规则

    spring boot      1.5.9.RELEASE spring cloud    Dalston.SR1 1.前言 昨天做了 spring cloud config 配置中心 获取存在gi ...

  7. 基于Apache Hudi + Flink的亿级数据入湖实践

    本次分享分为5个部分介绍Apache Hudi的应用与实践 实时数据落地需求演进 基于Spark+Hudi的实时数据落地应用实践 基于Flink自定义实时数据落地实践 基于Flink+Hudi的应用实 ...

  8. 05.python解析式与生成器表达式

    解析式和生成器表达式 列表解析式 列表解析式List Comprehension,也叫列表推导式 #生成一个列表,元素0-9,将每个元素加1后的平方值组成新的列表 x = [] for i in ra ...

  9. Presto 在字节跳动的内部实践与优化

    在字节跳动内部,Presto 主要支撑了 Ad-hoc 查询.BI 可视化分析.近实时查询分析等场景,日查询量接近 100 万条.本文是字节跳动数据平台 Presto 团队-软件工程师常鹏飞在 Pre ...

  10. 使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

    本文要点:设计一条 Spring Boot 最基本的流水线:包括构建.制品上传.部署.使用 Docker 容器运行构建逻辑.自动化整个实验环境:包括 Jenkins 的配置,Jenkins agent ...