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

posted @ 2018-04-04 19:42  何必再忆  阅读(407)  评论(0编辑  收藏  举报