zoukankan      html  css  js  c++  java
  • 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; 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模式)测试通过。

    仅做记录。

  • 相关阅读:
    springboot(十二)-分布式锁(redis)
    springboot(十一)-为什么要用springboot
    HashMap和HashTable区别
    ArrayList和LinkedList区别
    springcloud(三)-Eureka
    springboot(十)-监控应用
    springboot(九)-log配置
    springcloud(二)-最简单的实战
    rest版的webservice
    sqlite与android交互 (封装)
  • 原文地址:https://www.cnblogs.com/moutudou/p/11797075.html
Copyright © 2011-2022 走看看