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. Excel 2007表格内输入http取消自动加上超链接的功能

    经常使用Excel表格工作的也许会发现,当我们在表格内输入http://XXXX时,默认情况下都会自动加上超链接,如下: 当我们点击域名准备编辑修改时,往往都会调用浏览器转到该域名之下,达不到编辑修改 ...

  2. virgo-tomcat-server的生产环境线上配置与管理

    Virgo Tomcat Server简称VTS,VTS是一个应用服务器,它是轻量级, 模块化, 基于OSGi系统.与OSGi紧密结合并且可以开发bundles形式的Spring web apps应用 ...

  3. python标准库和第三方库的区别

    1.python的标准库是随着pyhon安装的时候默认自带的库. 2.python的第三方库,需要下载后安装到python的安装目录下,不同的第三方库安装及使用方法不同. 3.它们调用方式是一样的,都 ...

  4. Java--TestNG

    TestNG类的配置信息:  @BeforeSuite:在此套件中的所有测试运行之前,将运行带注释的方法.  @AfterSuite:在此套件中的所有测试运行后,将运行带注释的方法.  @Before ...

  5. Mysql----索引原理与慢查询优化

    一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...

  6. java成员变量和局部变量的初始化和内存中的运行机制

    成员变量: 当系统加载类或创建类的实例时,系统会自动为成员变量分配内存空间,并在分配内存空间后,自动为成员变量指定初始值. eyeNum是类属性.name是实例属性 所有person实例访问eyeNu ...

  7. TOP100summit:【分享实录】链家网大数据平台体系构建历程

    本篇文章内容来自2016年TOP100summit 链家网大数据部资深研发架构师李小龙的案例分享. 编辑:Cynthia 李小龙:链家网大数据部资深研发架构师,负责大数据工具平台化相关的工作.专注于数 ...

  8. HDU 5512 - Pagodas - [gcd解决博弈]

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5512 Time Limit: 2000/1000 MS (Java/Others) Mem ...

  9. Oracle卸载之Win7操作系统下Oracle11g 数据库卸载过程图解

    1.首先停止oracle11g数据库的5个服务 右键“计算机”,在下拉菜单列表中单击“管理”,进入计算机管理器.图解步骤如下: 选择左侧工具栏最后一项“服务和应用程序”,点击进入下拉菜单,单击“服务” ...

  10. MongoDB-3.4安装文档

    1.建立目录 2.将解压文件cp到步骤1建立目录下 mongodb-win32-x86_64-enterprise-windows-64-3.4.1.zip 3.配置环境变量 4.启动mongodb服 ...