html5上传文件提交服务器前的一些前端验证（代码实例）

我做的是app上传，要求.apk格式，并且小于20兆。由于htML5不能认识apk的扩展名。所以自己写了一个获取扩展名的函数

html表单

 input  tyPE="file" name="app_file" accept=".apk" onchange="PRocessFiles(this.files)">
    /input>

JS代码

  //客户端限制文件大小类型   function processFiles(files)  //这里必须是files，传递过来一个files对象，是上传文件的集合   {
                VAR file = files[0];
      //第一个文件            fileExtName = getExtName(file.name);
      //获取扩展名，调用下面的函数            fileSize = file.size;
       //直接可以取到            if(fileSize >
 20*1024*1024)   //拿到的单位为字节        {
             alert('app最大长度为20兆，请重新上传');
             flag = false;
 //用来判断是否组织提交表单的默认事件        }
else         {
             flag = true;
        }
        if(fileExtName != '.apk')        {
             alert('请上传正确的文件');
             flag1 = false;
        }
else         {
             flag1 = true;
        }
               }
  //拿到扩展名  function getExtName(str)  {
       var index1=str.lastIndexOf(".");
        //拿到最后一个.   var index2=str.length;
        //字符串总长度   var postf=str.substring(index1,index2);
    //后缀名  .的位置截取到最后   return postf;
  }
  //判断是否阻止提交表单（需要先引入jquery）  $('#submIT').click(function()     //submit需要在html的提交按钮加上 id ="submit"  {
       if(flag1 == false || flag == false) return false;
  }
    );
     /script>
    

我做的是app上传，要求.apk格式，并且小于20兆。由于html5不能认识apk的扩展名。所以自己写了一个获取扩展名的函数

html表单

 input  type="file" name="app_file" accept=".apk" onchange="processFiles(this.files)">
    /input>

JS代码

  //客户端限制文件大小类型   function processFiles(files)  //这里必须是files，传递过来一个files对象，是上传文件的集合   {
                var file = files[0];
      //第一个文件            fileExtName = getExtName(file.name);
      //获取扩展名，调用下面的函数            fileSize = file.size;
       //直接可以取到            if(fileSize >
 20*1024*1024)   //拿到的单位为字节        {
             alert('app最大长度为20兆，请重新上传');
             flag = false;
 //用来判断是否组织提交表单的默认事件        }
else         {
             flag = true;
        }
        if(fileExtName != '.apk')        {
             alert('请上传正确的文件');
             flag1 = false;
        }
else         {
             flag1 = true;
        }
               }
  //拿到扩展名  function getExtName(str)  {
       var index1=str.lastIndexOf(".");
        //拿到最后一个.   var index2=str.length;
        //字符串总长度   var postf=str.substring(index1,index2);
    //后缀名  .的位置截取到最后   return postf;
  }
  //判断是否阻止提交表单（需要先引入jquery）  $('#submit').click(function()     //submit需要在html的提交按钮加上 id ="submit"  {
       if(flag1 == false || flag == false) return false;
  }
    );
     /script>
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！