`
西北小强
  • 浏览: 344482 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多个上传文件用js验证文件的格式和大小(转载)

阅读更多

转载自龙哥博客原文链接:(http://blog.sina.com.cn/369768231qq)

 

多个上传文件用js验证文件的格式和大小

html部分:

  <dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data">
    <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile1" id="uploadedFile1" value="" onchange="checkfile('uploadedFile1');"/>
    <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile2" id="uploadedFile2" value="" onchange="checkfile('uploadedFile2');"/>
    <a class="btn_sprite btn_font14_red" href="javascript:;"><span>提交申请</span></a>

     <dsp:input type="submit" style="display:none;" bean="ReturngoodsFormHandler.submitReturngoods" id="submitReturngoods" value="Add"/>

      </dsp:form>

 

需要注意:上传文件要有一个id,然后onchage事件里加一个id的名称;

 

js部分:

//将验证的设置和错误信息抽离出来,有利于最后submit时候做判断

var flag=true;
 var errorinfo="";

//验证文件的格式
 function checkfile(filenames){
   filename=document.getElementByIdx_x_x(filenames).value;

   var re=/(.[.]bmp)$|(.[.]gif)$|(.[.]jpg)$|(.[.]png)$|(.[.]jpeg)$/i;
    if (!re.test(filename)) {
    errorinfo = "只支持bmp,gif,jpg,png,jpeg格式文件,请重新上传";
    alert(errorinfo);
    flag = false;
    return false;
     }

//验证文件的大小
     if(document.getElementByIdx_x_x(filenames).size>8000){
      errorinfo = "文件必须小于800KB,图片太大 size:"+document.getElementByIdx_x_x_x_x_x(filenames).size;
      alert(errorinfo);
      return false;
     }
 }

 jQuery('.btn_font14_red').click(function(){
  if(flag==true){
   $("#submitReturngoods").click();
  }else{
   alert(errorinfo);
   return false;
  }  

 });

注意:这么做的好处是:第一:上传文件的时候,如果有错误,第一时间通知用户,用户去修改;

第二:如果用户最后填完了,虽然之前有提示语句,但是用户忘了是什么,点击提交的时候,仍然可以提示用户问题的原因。同时将错误信息和设置值放在最外面,而不用再次验证,可以节省页面效率。

 (document.getElementByIdx_x_x(filenames)  不知道为啥发表的时候,总是多个_x,去又去不掉,大家在copy的时候记得去掉哈)

分享到:
评论

相关推荐

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    js验证上传swf文件格式的大小

    总结,验证SWF文件格式和大小涉及到前端JavaScript和后端PHP的协同工作,确保了文件上传的正确性和安全性。在实际项目中,可以结合SWFUpload等工具优化用户体验,同时遵循良好的编程实践来增强系统的健壮性。

    JavaScript上传多个文件

    这个标题为“JavaScript上传多个文件”的资源,显然提供了一个简洁而实用的解决方案,使得开发者能够在不复杂的代码结构下实现这一功能。 首先,我们需要了解HTML5引入的`&lt;input type="file"&gt;`元素的新特性,特别是...

    jQuery多文件上传并获取大小与格式代码

    本文将深入探讨如何使用jQuery实现多文件上传功能,并在此过程中获取每个文件的大小和格式信息。 首先,要实现多文件上传,我们需要一个HTML表单,通常包含一个`&lt;input&gt;`元素,其`type`属性设置为`file`,并且`...

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出...

    JS判断上传文件的大小类型等限制

    使用JSP作为服务器端技术时,可以在文件上传后再次验证文件大小和类型,确保数据安全性。 #### 5. 总结 通过以上介绍,我们可以看到,在前端利用JavaScript对文件上传进行大小和类型的限制是非常实用且必要的。...

    js上传文件js 上传单个文件(任意大小)

    使用JavaScript上传文件是一项复杂但基本的前端技能,它涉及到文件读取、网络通信、错误处理等多个方面。掌握这些技术不仅能够提升用户体验,还能优化网站的性能和响应性。开发者应该根据项目需求和浏览器支持情况,...

    asp.net实现文件夹上传、修改、删除,文件格式限制,文件大小限制c#源码

    在ASP.NET中,开发文件管理功能是常见的需求,如文件上传、修改、删除以及设置文件格式和大小的限制。这个C#源码示例提供了一个基础的实现,非常适合初学者来学习和理解相关技术。接下来,我们将深入探讨这些知识点...

    js验证 PDF格式

    从给定的文件信息来看,虽然标题提到的是“js验证 PDF格式”,但是在提供的代码片段中并未直接涉及PDF格式的验证,而是包含了一系列用于验证不同数据格式的JavaScript函数。以下是对这些函数及其作用的详细解析: #...

    上传文件验证表单

    Webuploader是阿里大鱼团队开发的一个JavaScript文件上传组件,它支持多文件选择、断点续传、预览、进度条显示等功能,广泛应用于网页文件上传场景。在本项目中,Webuploader被用来实现代理文件上传的基本功能。它的...

    多文件上传和展示

    【标签】:Bootstrap-fi 和多文件上传 Bootstrap-fi 指的是Bootstrap-fileinput,它是基于流行的前端框架Bootstrap构建的。Bootstrap以其响应式设计和易用性著称,使得Bootstrap-fileinput在视觉效果和交互上都能与...

    layui一个页面使用多个文件upload上传按钮

    本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮,以及相关的配置和注意事项。 首先,layui的upload组件是基于HTML5的File API构建的,支持多文件选择、预览、上传进度显示等功能。在...

    js控制上传文件格式

    ### JavaScript 控制上传文件格式详解 #### 一、背景介绍 在Web开发中,经常会遇到用户上传文件的需求。为了确保用户上传的是预期类型的文件(例如图片文件),开发者通常需要对上传文件的格式进行验证。本篇文章...

    js压缩工具,单个文件和多个文件同时都可以导入

    标题中提到的"js压缩工具"是一种专门针对JavaScript文件进行优化的工具,它可以将单个或多个JavaScript文件合并并压缩,消除其中的空白、注释和不必要的字符,同时进行代码混淆,使文件更紧凑,加载更快。这个工具...

    js上传大文件,上传的文件大小不限

    ### JS上传大文件技术解析:实现不限大小的文件上传及进度条显示 #### 技术背景与需求分析 在Web应用开发中,文件上传是一项基本的功能。随着互联网应用的不断扩展,用户对于文件上传的需求也变得越来越多样化。...

    上传多个文件

    在IT领域,上传多个文件是一项常见的操作,尤其在网页或应用程序中。这一功能使得用户能够一次性上传多个文档、图片或其他类型的文件,极大地提高了效率。在本文中,我们将深入探讨实现这个功能的技术细节、相关技术...

    js 多文件上传

    在JavaScript中实现多文件上传是一项常见的任务,尤其是在现代网页应用中。这个话题涉及到HTML5的新特性、Ajax异步通信以及可能的后端处理。以下是对这个主题的详细讲解。 首先,`js多文件上传`的核心是HTML5的`...

    JS获取文件大小方法小结

    在网页交互中,有时我们需要获取用户选择的文件的大小,以便进行一些验证或处理。本文将介绍几种JavaScript获取文件大小的方法。 首先,我们来看方法一,使用ActiveX控件。这种方法适用于Internet Explorer浏览器,...

    通用多文件上传JS类(附源码)

    本文将详细介绍一个基于JavaScript实现的通用多文件上传类,并提供源码分析,帮助开发者理解和应用。 首先,我们要理解的是,HTML5引入了`&lt;input type="file" multiple&gt;`这一特性,使得在浏览器端可以支持多选文件...

    jquery过滤上传文件的类型和限制文件的大小

    ### 使用jQuery过滤上传文件的类型和限制文件大小 在Web开发中,经常需要处理用户上传文件的功能。为了确保系统的安全性和提高用户体验,开发者通常需要对上传的文件进行一系列的检查,比如验证文件类型是否符合...

Global site tag (gtag.js) - Google Analytics