如何用javascript控制上传文件的大小

代码如下:

<form   name=Myform  onsubmit="return   CheckFileSize()">    
  <input   type=file   name=photo><br/>    
  <input   type=submit   value=submit></form>

<SCRIPT   LANGUAGE="JavaScript"><!--    
  function   CheckFileSize()    
  {    
      var   s   =   document.Myform.photo.value;    
      if(s==" ")return   false;    
      var   img   =   new   Image();    
      img.src   =   s;    
      alert("高   =   "+   img.height   +   "\n宽   =   "+   img.width);    
      alert("fileSize   =   "+   img.fileSize   +"   字节");    
      return   false;    
  }    
  //--></SCRIPT>

应用了javascript和在IE下img本身的fileSize属性。另外img还有其他的几个属性，如fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我们可以通过这些属性来获取图片文件的部分信息，如文件大小，我们用file表单同img标签结合，就能够在上传之前判断图片文件的大小是否合法了。


代码如下:

<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> K 
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/> 
<img src="about:blank" id="fileChecker" alt="test" height="18"/>

<script type="text/javascript"> 
var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker) 
{ 
oFileChecker.src = filePicker.value; 
}

oFileChecker.onreadystatechange = function () 
{ 
if (oFileChecker.readyState == "complete") 
{ 
checkSize(); 
} 
}

function checkSize() 
{ 
var limit = document.getElementById("fileSizeLimit").value * 1024;

if (oFileChecker.fileSize > limit) 
{ 
alert("too large"); 
} 
else 
{ 
alert("ok"); 
} 
} 
</script>

代码如下:

function   CheckFileSize()    
  {    
     var FileMaxSize = 100;//限制上传的文件大小，单位(k) 
      var   s   =   document.RegForm.Img_1.value;   
      //if(s==""){alert("No image,please select again!");document.RegForm.Img_1.focus(); return   false;}    
      var   img   =   new   Image();

img.src   =   s;

if(img.fileSize>FileMaxSize*1024){alert("The file size exceeds "+FileMaxSize+"K，please choose a smaller one!");document.RegForm.Img_1.focus();return false;}

//--></SCRIPT>    
<FORM action="**.asp" method="post" onSubmit="return CheckFileSize()" enctype="multipart/form-data" name="RegForm"> 
<input name="Next" type="submit" class="pBttn" id="Next" value="Save">

赞 (0)

相关推荐

  • JavaScript检测上传文件大小的方法

    本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

  • JS获取文件大小方法小结

    本文实例总结了JS获取文件大小方法.分享给大家供大家参考,具体如下: 方法一,利用ActiveX控件实现: <script type="text/javascript"> function getFileSize(filePath) { var fso = new ActiveXObject("Scripting.FileSystemObject"); alert("文件大小为:"+fso.GetFile(filePath).size

  • javascript实现获取指定精度的上传文件的大小简单实例

    js实现获取指定精度的上传文件的大小,主要采用html和JavaScript,用浏览器运行下述代码,按照操作:选择文件->获得文件大小的顺序,即可. 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得文件大小</title> </head> <body> <f

  • javascript实现限制上传文件大小

    前言: 项目中经常用到需要上传文件.照片等功能,同时需要限制所上传文件的大小.很多插件都会采用后台请求验证,前端Js校验比较少.本篇介绍一个前端JS便捷判断上传文件大小的方法. 代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截.由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可. JS代码: 复制代码 代码如下: <script type="text/javascript">       //

  • 如何用javascript控制上传文件的大小

    复制代码 代码如下: <form   name=Myform  onsubmit="return   CheckFileSize()">       <input   type=file   name=photo><br/>       <input   type=submit   value=submit></form> <SCRIPT   LANGUAGE="JavaScript"><

  • JavaScript获取上传文件相关信息示例详解

    目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片

  • Javascript读取上传文件内容/类型/字节数

    在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示,这个时候就不需要将文件上传到服务器,完全可以通过Javascript来获取上传文件内容然后进行展示,既加快了操作速度,也减轻了服务器的负载和存储.接下来就是一个实际操作的过程: 首先来看一下一个上传文件对象的属性: UI设计(React+Material-ui) ... const styles = theme => (

  • javascript验证上传文件的类型限制必须为某些格式

    复制代码 代码如下: //验证文件的格式 function validateFile(){ var fileObject=$("#filename"); var errorObject=$("#error"); var filepath=fileObject.val(); var fileArr=filepath.split("//"); var fileTArr=fileArr[fileArr.length-1].toLowerCase().s

  • 如何限制上传文件的大小？

    <%@ LANGUAGE="VBscript" %>      <html> <head>      <title>撼雪喷云之限传文件</title>      </head>      <body>      <% Set upl = Server.CreateObject("SoftArtisans.FileUp") %>      <% upl.MaxByte

  • Javascript & DHTML上传文件控件第1/4页

    上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D 首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写. 首先看一个成品截图预览: 一.接下来我们先说思路,首先定义一个upload"类", 一).这个类的公共访问信息应该有: 1.构造函数

  • ASP.NET插件uploadify批量上传文件完整使用教程

    ASP.NET插件uploadify批量上传文件完整使用教程

    uploadify批量上传文件完整使用教程,供大家参考,具体内容如下 1.首先准备uploadify的js文件,网上一搜一大堆 2.上传页面UpFilePage.aspx 关键代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/h

  • 用.Net的File控件上传文件的解决方案

    在遍历了csdn中所有关于上传大文件的帖子以后,写了这篇垃圾.(:-)) 上传大文件,有好几种方法: 1.思归的HttpWorkerRequest方法,太难,看不懂:-( 2.利用第三方的控件 AspNetUpload 要钱!!算了,咱还是喜欢免费的. 3.修改web.config文件,但是不能捕获错误. 4.通过ftp的方式上传.服务器需要提供ftp服务. 没辙,只好选第三种方式,谁让咱太蠢了呢!(太蠢了,没有关系,要多吃鱼,听说吃鱼能聪明点.) 那就仔细专研第三种方式吧! 修改Webcong

随机推荐