多文件上传,使用js对文件进行校验,包括文件单个大小,格式,总的文件大小,文件是否为空等

原创 2016年05月30日 11:43:06
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'upload.jsp' starting page</title>
    
    <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
    var num=0;

    var totalSizeArray={};

//添加附件

    function AddAttachments()
        {                  
              document.getElementById('attach').innerText = "继续添加附件";     
              tb = document.getElementById('attAchments');
              newRow = tb.insertRow();
              newRow.insertCell().innerHTML = "<input name='file' size='50' type='file' id=file"+num+">&nbsp;&nbsp;<input type='button' value='删除'           onclick='delFile(this.parentElement.parentElement.rowIndex)'>&nbsp;&nbsp;&nbsp;&nbsp;<label id=p"+num+"></label>";         
           totalSizeArray[num]=0;
           num ++;

         }

//删除附件类容

         function delFile(index)
         {    
              totalSizeArray[index]=0;
              document.getElementById('attAchments').deleteRow(index);
              tb.rows.length > 0?document.getElementById('attach').innerText = "继续添加附件":document.getElementById('attach').innerText = "添加附件"; 
         }  
         $(document).ready(function(){
          $("#btnSend").click(function(){

            var fileLength=$("input[type='file']").length;

//判断是否有上传的文件

        if(fileLength==0){
      alert("当前没有可上传的文件");
      return false;
      }else{
      for(var i=0;i<document.form1.elements.length-1;i++)

                {

//判断文控件间内容是否为空

                  if(document.form1.elements[i].value=="")
                  {
                      alert("当前表单不能有空项");
                      document.form1.elements[i].focus();
                      return false;
                  }

                }

//判断文件总大小是否大于10M

     
      var totalSize=0;
      for(x in totalSizeArray){
      totalSize=totalSize+totalSizeArray[x];
      }
      if(totalSize>1024*10){
      alert("文件总大小为:"+totalSize/1024+"MB,超过了10MB,请重新选择文件!");
      return false;
      }else{
         $("#form1").submit();
      }
      }
         });
       }); 
       $(document).ready(function () {
            $("#attAchments").delegate("input[type='file']","change",function(){ 
                var filepath = $(this).val();
                var fileId=$(this).attr("id");
                var countNum=fileId.substring(4,fileId.length);
                var count="p"+countNum;
                var extStart = filepath.lastIndexOf(".");

                var ext = filepath.substring(extStart, filepath.length).toUpperCase();

//判断文件类型

                if (ext==".ZIP"||ext==".RAR" ||ext==".TXT") {
                    alert("不能上传后缀名为.txt、.rar、.zip类型的文件!");
var obj = document.getElementById(fileId) ; 
obj.outerHTML=obj.outerHTML;  
                    $("#"+count).text("");
                    return false;
                } else { $("#"+count).text(filepath);}
                var fileSize=0;         
       fileSize=this.files[0].size;     
       var size=fileSize/1024;

       size=Math.round(size);

//判断单个文件是否大于2M

       if(size>1024*2){
        alert("单个文件大小不能超过2M,请重新选择文件!");
        var obj = document.getElementById(fileId) ; 
obj.outerHTML=obj.outerHTML;  
        $("#"+count).text("");
       }else{
        totalSizeArray[countNum]=size;
        size=$("#"+count).text()+"\t\t\t\t"+size;
        $("#"+count).text(size+"KB");
       }
            });
        });
        
    </script>
  <body>
    <form id="form1" name="form1" method="POST" enctype="multipart/form-data" action="uploadServlet">
    <table id="attAchments">
    </table>
    </form>
    <a id="attach" onclick="AddAttachments();" href="javascript:;" name="attach">添加附件</a>
    <input type="button" id="btnSend" value=" 上传 "/>
  </body>
</html>

用python对指定目录下的所有文件(夹)大小进行排序

Windows的某个目录下sort by size只能对该目录下的文件进行排序,不能对目录下的文件夹进行排序,而手工点击右键逐个计算文件夹的大小效比较低。在此我用用python对指定目录下的所有文件(...
  • goandfly
  • goandfly
  • 2016年07月29日 18:56
  • 336

jQuery实现上传附件为空和文件格式校验

HTML代码片段正式文本: JS校验方法的实现代码 //正式文本校验
  • warylee
  • warylee
  • 2015年04月07日 09:48
  • 2752

JavaScript验证上传文件格式及大小

在上传操作中,经常会遇到要求指定上传文件的格式,下面的实例是在客户端通过JavaScript验证上传图片格式为jpg/gif/png  ...
  • spring21st
  • spring21st
  • 2010年03月01日 15:49
  • 7419

FAT32和NTFS最大支持的单个文件大小分别是多大?

以前,RAID控制器和文件系统都有2TB的限制。控制器上的限制,主要是指每个LUN不能大于2TB,而磁盘组一般则没有这个限制;文件系统的限制主要是指每个分区(partition)不能大于2TB,不过3...
  • yoyocn
  • yoyocn
  • 2014年09月11日 10:44
  • 1621

上传一个文件,检验是否是EXCEL文件,并检验其大小

Code: protected void AddBatButton_Click(object sender, EventArgs e)           {            ...
  • xueyong4712816
  • xueyong4712816
  • 2011年01月14日 14:49
  • 727

linux shell 判断 文件整数 存在、大小、空、等

转自:http://hi.baidu.com/nbye2000/item/371624271fdc1dd3a417b642 *      文件测试操作符     如果下面的条件成立将会返回真....
  • shanliangliuxing
  • shanliangliuxing
  • 2013年01月13日 22:22
  • 1811

linux下各种文件大小限制

Ext2  Ext2 文件系统是Linux 特有的文件系统,它拥有传统UNIX 文件系统的许多特性,如块、inode  和目录等概念。Ext2 非常健壮,具有很多优良的性能。同时,Ext2 也是可扩...
  • polebear801
  • polebear801
  • 2015年01月14日 16:01
  • 1562

mongodb 中的"坑"系列 --- 单个文档16M大小限制

仔细想想, 我们早已经进入了海量数据的时代, 数据量早已经不是M来形容
  • ray_up
  • ray_up
  • 2014年09月22日 10:48
  • 9415

js兼容ie和chrome的文件上传大小校验

js兼容ie和chrome的文件上传的大小校验
  • daxianghaoshuai
  • daxianghaoshuai
  • 2017年08月16日 11:33
  • 456

删除文件大小为0的文件

#! /bin/bash for filename in ` ls ` do   if test -d $filename   then     b=0   else     a=$(l...
  • Phoenix_99
  • Phoenix_99
  • 2012年04月11日 15:38
  • 789
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多文件上传,使用js对文件进行校验,包括文件单个大小,格式,总的文件大小,文件是否为空等
举报原因:
原因补充:

(最多只允许输入30个字)