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. Mysql语句优化

    总结总结自己犯过的错,网上说的与自己的Mysql语句优化的想法. 1.查询数据库的语句的字段,尽量做到用多少写多少. 2.建索引,确保查询速度. 3.orm框架自带的方法会损耗一部分性能,这个性能应该 ...

  2. memcached stats 命令

    STAT pid 1552 STAT uptime 3792 STAT time 1262517674 STAT version 1.2.6 STAT pointer_size 32 STAT cur ...

  3. VB学习之路基础(一)

    1.VB不区分大小定,VB编辑器会自动更正. 2.每一行代码语句,没有语句结束符. 3.续行符:一个"空格"加上一个"下划线".不能在参数中间加续行符. 5.合 ...

  4. mysql概要(十四)(二)索引(补充:外键级联操作)

    [ ON DELETE { NO ACTION | CASCADE | SET NULL | SET DEFAULT } ] [ ON UPDATE { NO ACTION | CASCADE | S ...

  5. jstack命令的使用

    文章来源:https://blog.csdn.net/wufaliang003/article/details/80414267 jstack是java虚拟机自带的一种堆栈跟踪工具. jstack用于 ...

  6. Django---渲染到模板

    简单的路由操作: from index import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', vie ...

  7. tomcat启动后,页面浏览时报错 Unable to compile class for JSP的解决方案【原创】

    问题描述: tomcat启动后,console正常,console中语句为: 信息: Server startup in 7291 ms   但浏览器访问首页面http://localhost:808 ...

  8. MySQL double 类型查询不准确的问题

    问题 有如下查询: SELECT * FROM <table-name> WHERE price > 32.99; 结果竟然包含了 32.99 的数据行. 原因 price 的类型是 ...

  9. saltstack-----上线环境篇(一)

    在11上安装mysql yum install mariadb mariadb-server -y 在mysql的配置文件my.cnf中加入 init_connect='SET collation_c ...

  10. Centos清除IP

    要把配置好的ip清除掉,可以使用以下命令: ip addr flush dev eth0 如果系统中没有ip这个命令,可以使用更简单的: ifconfig eth0 0.0.0.0 可以用于PPTP拨 ...