zoukankan      html  css  js  c++  java
  • HTML ajax 上传文件限制文件的类型和文件大小

    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;
        }

  • 相关阅读:
    状态图(Statechart Diagram)—UML图(五) .
    时序图(Sequence Diagram)—UML图(六)
    传说中的WCF(8):玩转消息协定
    SCSF 系列:利用 Smart Client Software Factory 实现 StopLight (Step By Step)
    ASP.NET MVC 3.0(四): 我要MVC潜规则之配置Routing
    传说中的WCF(14):WCF也可以做聊天程序
    部署图(Deployment Diagram)—UML图(九)
    活动图(Activity Diagram)—UML图(四)
    今天做的机试题Socket聊天程序
    UML的基本结构 .
  • 原文地址:https://www.cnblogs.com/longsf/p/8719009.html
Copyright © 2011-2022 走看看