html

     <input type="file" name="excel" id="excel_input" accept=".doc,.docx,.xls,.xlsx" onchange ="uploadFile(this,1)"/>

js

  

function getFileType(filePath){

  //获取文件的后缀名
  var startIndex = filePath.lastIndexOf(".");
  if(startIndex != -1)
    return filePath.substring(startIndex+1, filePath.length);
    else return "";
    }
  function uploadFile(obj, type) {
    var filePath = $("#excel_input").val();

  if("" != filePath){
    var fileType = getFileType(filePath);
    //判断上传的附件是否为word文件和excel文件
    if("doc"!=fileType && "docx"!=fileType && "xls"!=fileType && "xlsx"!=fileType ){
      $("#excel_input").val("");
      alert("请上传表格文件");
      }
      else{
      //获取附件大小(单位:KB)
      var fileSize = document.getElementById("excel_input").files[0].size / 1024;
      if(fileSize > 500){
        alert("文件大小不能超过500KB");
        $("#excel_input").val("");
      } else{
        var formData = new FormData();

        var name = $("#excel_input").val();

        formData.append("excel",$("#excel_input")[0].files[0]);  // 获取文件的内容

        formData.append("name",name);   //文件的路径

        $.ajax({
          type: 'POST',

          processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
          contentType : false, // 不设置Content-type请求头
          url : "/admin/user/addusers",  //填你自己的路劲
          data:formData,
          dataType : 'json',// 返回值类型 一般设置为json
          success : function(data) {// 服务器成功响应处理函数
            alert("上传成功");
            // window.location.reload();//上传成功后刷新页面
            },
          error : function(data){
            alert("服务器异常");
            }
          });
        }
      }
     }

    return false;
    }

HTML ajax 上传文件限制文件的类型和文件大小的更多相关文章

  1. BatsingJSLib 2.3、Ajax上传多个文件

    //2.3Ajax上传单个或多个文件 //<input type="file" multiple="multiple"/> //参数:文件的表单JD ...

  2. 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  3. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  4. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  5. asp.net MVC ajax上传文件

    普通上传 view: <body> <form id="form1" method="post" action="@Url.Acti ...

  6. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  7. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

  8. ajax上传文件,并检查文件类型、检查文件大小

    1.使用ajaxfileupload.js的插件,但是对插件做了一处修改,才能够正常使用 修改的部分如下: uploadHttpData: function (r, type) { var data ...

  9. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  10. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

随机推荐

  1. iOS开发过程中使用Core Data应避免的十个错误

    原文出处: informit   译文出处:cocoachina Core Data是苹果针对Mac和iOS平台开发的一个框架,主要用来储存数据.对很多开发者来说,Core Data比较容易入手,但很 ...

  2. hdu 1525 Euclid's Game【 博弈论】

    Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first player, subtra ...

  3. HDU 6278 - Just h-index - [莫队算法+树状数组+二分][2018JSCPC江苏省赛C题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6278 Time Limit: 6000/3000 MS (Java/Others) Memory Li ...

  4. 浅谈jvm中的垃圾回收策略

    下面小编就为大家带来一篇浅谈jvm中的垃圾回收策略.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   java和C#中的内存的分配和释放都是由虚拟机自动管理的,此前我已 ...

  5. MySQL复制原理

    mysql从3.23开始提供复制功能,复制指将主库的ddl和dml操作通过binlog文件传送到从库上执行,从而保持主库和从库数据同步.mysql支持一台主库同时向多台从库复制,从库同时也可以作为其他 ...

  6. The third column indicates whether subclasses of the class declared outside this package have access to the member.;

    总结1.modifier 改性剂 修饰符 修饰语 调节器access modifier 访问修饰符 存取权限 存取修饰词 存取修饰字官网“can”Access level modifiers dete ...

  7. LDAP summary-- Python ldap

    A DN is comprised of a series of RDNs (Relative Distinguished Names) found by walking UP the tree (D ...

  8. 2018/03/28 每日一个Linux命令 之 mkdir/rmdir

    用于建立空文件夹和删除文件夹 -- 两命令重要参数 -p 递归建立/删除 -- 例如 mkdir -p demo1/demo2/demo3 建立demo3空文件夹,如果demo1/demo2没建立也建 ...

  9. LightOj 1104 - Birthday Paradox(生日悖论概率)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1104 题意:一年365天,在有23个人的情况下,这23个人中有两个人生日相同的概率是大 ...

  10. mysql 字符串类型 char varchar

    字符类型用在存储名字.邮箱地址.家庭住址等描述性数据   char指的是定长字符,varchar指的是变长字符 #官网:https://dev.mysql.com/doc/refman/5.7/en/ ...