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

最新推荐文章于 2023-06-30 23:53:55 发布
最新推荐文章于 2023-06-30 23:53:55 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 前端 web 文章标签： web js 多文件上传 添加附件 文件校验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jonebuqi/article/details/51536793
版权
<%@ 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='删除'           οnclick='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" οnclick="AddAttachments();" href="javascript:;" name="attach">添加附件</a>
    <input type="button" id="btnSend" value=" 上传 "/>
  </body>
</html>
Jonebuqi
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 对上传文件大小、类型校验
指尖缘的博客
04-15 1077
比如页面有一个file input： <input type="file" id="testFile" /> 可用如下代码进行校验： $('#testFile').bind('change', function() { // 获取文件大小和名字 var size = this.files[0].size; va...
多个上传文件用js验证文件的格式和大小的方法(推荐)
10-20
下面小编就为大家带来一篇多个上传文件用js验证文件的格式和大小的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js判断文件上传框是否为空
kljilll的博客
05-03 546
直接上代码 submit() { if (!$("#upLoadYueKangCode").get(0).files[0]){ alert("请上传粤康码"); return; } }
js 前端验证文件上传格式，限制上传文件大小（兼容各种浏览器）
stwood007的博客
12-14 6182
js 前端验证文件上传格式，js 前端验证上传文件大小，兼容各种浏览器
js判断文件类型详解
qq_42880714的博客
06-30 4170
js判断文件类型详解
Js实现简单的文件类型、文件大小、图片像素校验
qq_39410252的博客
12-11 1001
Js实现文件类型、文件大小、图片像素校验Demo
判断链接后缀文件类型
悄悄地卷的博客
10-10 1218
1、获取文件后缀 //文件路径 var filePath = "file://upload/jb51.png"; //获取最后一个.的位置 var index= filePath.lastIndexOf("."); //获取后缀 var ext = filePath.substr(index+1); //输出结果 console.log(ext); 2、文件类型判断 ​ 我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首 先定义一个判断函数： func
js判断html file的数量,JavaScript设置表单上传时文件个数的方法
weixin_30579759的博客
06-29 482
本文实例讲述了JavaScript设置表单上传时文件个数的方法。分享给大家供大家参考。具体如下：这是一个比较实用的功能，用JavaScript来设置表单上传文件时，根据需要生成上传表单，要几个生成几个，在网易邮箱、新浪邮箱的添加附件功能里都有这种功能，不过这一款没有删除表单的功能，如果输入的多了，只好重新来过啦运行效果如下图所示：具体代码如下：JavaScript设置表单上传时的文件个数var a...
上传图片前判断文件格式与大小验证文件是不是图片
01-02
最近工作中需要做一个上传图片的功能，既然上传的是图片，那么就应该在上传之前对文件进行一下验证，看看要上传的是不是图片文件。所以在上传之前要对所选文件的格式进行验证。上传图片时因为服务器资源有限，经常会...
将三个二进制文件合并为一个bin文件带crc校验 VC
04-18
将三个二进制文件合并为一个bin文件，并间隔2k增加crc校验。 运行：双击mergefile.exe 执行合并：将文件dfu_setting.dat+APP1.bin+APP2.bin 合并为MERGE_ota.bin MERGE_ota.bin头部有各个文件合并的起始位置和长度...
真正好用的js验证上传文件大小的简单方法
10-21
下面小编就为大家带来一篇真正好用的js验证上传文件大小的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js 上传文件校验文件类型和大小
04-27
js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小 js 上传文件校验 js 上传文件校验 js 上传文件校验
JS 获取文件后缀，判断文件类型(比如是否为图片格式)
11-21
1、获取文件后缀 有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名），可以通过如下方式进行截取： //文件路径 var filePath = "file://upload/jb51.png"; //获取最后一个.的位置 var index= filePath.lastIndexOf("."); //获取后缀 var ext = filePath.substr(index+1); //输出结果 console.log(ext); 效果图如下： 2、文件类型判断 我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是否是图片格式，首先定义一个判断
MD5文件校验和使用说明.zip
最新发布
01-01
MD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明.zipMD5文件校验和使用说明....
纯js判断文件流格式类型：pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定！
yiiran的技术交流博客
02-19 9270
js通过arraybuffer区分pdf,xls,xlsx,doc,docx,ppt,pptx文件类型，看这一篇就够啦。
js各种格式校验
weixin_55903841的博客
08-19 841
js各种格式校验。
html判断文件类型,JavaScript 如何检测文件的类型？
weixin_28750379的博客
06-11 450
本文转载自微信公众号「全栈修仙之路」，作者阿宝哥。转载本文请联系全栈修仙之路公众号。在日常工作中，文件上传是一个很常见的功能。在某些情况下，我们希望能限制文件上传的类型，比如限制只能上传 PNG 格式的图片。针对这个问题，我们会想到通过 input 元素的 accept 属性来限制上传的文件类型：这种方案虽然可以满足大多数场景，但如果用户把 JPEG 格式的图片后缀名更改为 .png 的话，就...
前端js页面校验上传的文件大小
Clarence_Pang的博客
07-11 2415
//判断文件大小，如果超过200MB 不允许提交 var fileSize=1; fileSize = form.upload.files[0].size; //获得文件大小； 1M文件的大小是1048576（1*1024*1024） if(parseInt(fileSize)>209715200){ popAlert(form.upload, "上传的文件大小不能超过200MB！");//popAlert函数是自定义的提示框函数，作用类似alert，但是可以在对应的输入框中显示
电商网站中我的足迹/浏览历史实现关键代码
Jonebuqi的博客
05-17 6910
在很多电商网站当中，都有浏览历史，或者我的足迹这个功能模块，一般来说，在顾客未登录的情况下，将顾客的浏览历史保存到服务器端的数据库里面，是不太现实的，所以通常的处理方式是将顾客的浏览历史保存道一个Cookie里面，浏览当当的官网我们可以发现，我们的浏览历史被保存到了一个叫做producthistoryid的Cookie里面，该Cookie的value值实际上就是所有浏览过的商品的id所拼接成的一个字符串，当我们查看历史记录或者我的足迹的时候，浏览器就将该Cookie的信息放到请求头里面，这样服务器就可以根据
文件上传如何对文件对象MultipartFile进行文件大小,格式,代码示例
07-12
在Java中，文件上传通常使用Spring框架的MultipartFile对象。可以使用MultipartFile来获取文件的大小和格式，并进行相应的校验。以下是一个示例代码： ```java import org.springframework.web.multipart.MultipartFile; public class FileUploadService { public void uploadFile(MultipartFile file) { // 检查文件大小 long fileSize = file.getSize(); if (fileSize > MAX_FILE_SIZE) { throw new IllegalArgumentException("File size exceeds the maximum limit."); } // 检查文件格式 String fileExtension = getFileExtension(file.getOriginalFilename()); if (!isSupportedFileFormat(fileExtension)) { throw new IllegalArgumentException("Unsupported file format."); } // 执行文件上传操作 // ... } // 获取文件扩展名 private String getFileExtension(String fileName) { int dotIndex = fileName.lastIndexOf("."); if (dotIndex > 0 && dotIndex < fileName.length() - 1) { return fileName.substring(dotIndex + 1).toLowerCase(); } return ""; } // 检查文件格式是否支持 private boolean isSupportedFileFormat(String fileExtension) { String[] supportedFormats = { "jpg", "jpeg", "png", "gif" }; // 支持的文件格式列表 for (String format : supportedFormats) { if (format.equalsIgnoreCase(fileExtension)) { return true; } } return false; } } ``` 在上述示例中，`uploadFile`方法接收一个MultipartFile对象作为参数。通过调用`getSize()`方法可以获取文件的大小，然后与预定义的最大文件大小比较进行校验。通过调用`getOriginalFilename()`方法获取文件名，并通过`getFileExtension`方法获取文件扩展名，然后与支持的文件格式列表进行比较，以确定文件格式是否支持。 请注意，示例中的`MAX_FILE_SIZE`和`isSupportedFileFormat`方法是示例中的一些自定义常量和方法，你可以根据实际需求进行调整和扩展。 这只是一个简单的文件上传校验示例，实际应用中可能还需要考虑其他安全性和业务需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值