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


Posted in Javascript onOctober 26, 2006
<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">

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
php中给js数组赋值方法
Mar 10 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
动态改变textbox的宽高的js
Oct 26 #Javascript
js传值 判断
Oct 26 #Javascript
点击广告后才能获得下载地址
Oct 26 #Javascript
PJBlog插件 防刷新的在线播放器
Oct 25 #Javascript
PJ Blog修改-禁止复制的代码和方法
Oct 25 #Javascript
Hutia 的 JS 代码集
Oct 24 #Javascript
xmlHTTP实例
Oct 24 #Javascript
You might like
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
详解jquery和vue对比
2019/04/16 jQuery
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python实现二叉堆
2016/02/03 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
写自荐信的七个技巧
2013/10/15 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
10的分与合教学反思
2014/04/30 职场文书
询价采购方案
2014/06/09 职场文书
建国大业电影观后感
2015/06/01 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python