jquery.form 兼容IE89文件上传
导入部分
<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文件上传的更多相关文章
- 考虑浏览器兼容的文件上传(IE8不支持FormData)
方法一:使用FormData(因IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器) 也可参考文章 http://www.jianshu.com/p/46e6e0 ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- 使用jquery的ajax提交文件上传
以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- 基于jquery ajax的多文件上传进度条
效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...
- jQuery的ajax实现文件上传大小限制
用jquery的ajax实现简单的文件上传功能,并且限制文件大小,先上代码. <!DOCTYPE html> <html> <head> <meta char ...
- Django 基于Ajax & form 简单实现文件上传
前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- jquery uploadify插件多文件上传
1.jquery uploadify 下载:http://www.uploadify.com/ 2.安装:解压后拷贝的工程目录下面,如:WebRoot/uploaddify 3.配置项说明: uplo ...
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...
随机推荐
- .NetCore下构建自己的服务配置中心-手动造轮子
本人主要利用IdentityServer4以及SignalR来实现,IdentityServer4作为认证,SignalR来交互配置,这里一些代码可能就是部分提出来,主要介绍实现原理及方法 实现配置中 ...
- JS 判断上传文件类型
var video_src_file = $("#video_src_file").val(); var fileTypes = new Array("flv" ...
- Centos安装rrdtool的yum源
由于centos的标准组件中是不带rrdtool的,因此我们需要添加一个dag的yum源,以安装rrdtool. 修改/etc/yum.repos.d/CentOS-Base.repo, #vi /e ...
- 第10组 Beta冲刺 (5/5)(组长)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14018671.html ·作业博客:https://edu.cnblogs.co ...
- .NET对接极光消息推送
什么是APP消息推送? 很多手机APP会不定时的给用户推送消息,例如一些新闻APP会给用户推送用户可能感兴趣的新闻,或者APP有更新了,会给用户推送是否选择更新的消息等等,这就是所谓的"消息 ...
- Java CAS 原理详解
1. 背景 在JDK 5之前Java语言是靠 synchronized 关键字保证同步的,这会导致有锁.锁机制存在以下问题: 在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问 ...
- 只需两步在Linux系统安装百度网盘--Ubuntu20
Linux Ubuntu系统安装百度网盘 百度网盘已支持Linux系统下载和使用.使用Linux系统下载并安装一个百度网盘是非常简单的,只需要以下两个步骤: 第一步 进入官网下载.deb类型的百度网盘 ...
- ffmpeg+nginx截取屏幕实时画面并进行rtmp推流在前端播放
准备环境和文件 1.下载ffmpeg的包[https://foxbaby.lanzoui.com/iYjPmup51cd] 地址:https://ffmpeg.org/download.html#bu ...
- 使用Rainbond打包业务模块,实现业务积木式拼装
背景 每个程序员在学习开发的过程中,都知道解耦和模块化的重要性,也希望自己设计和开发的程序支持模块化,开发好的模块其他人就能快速复用,为了达成这个效果,我们学习各种模块化和解耦的技术,从面向对象的设计 ...
- 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单
不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...