如何用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 相关文章推荐
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
jquery中动态效果小结
Dec 16 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
动态改变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时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
幼儿园保教管理制度
2014/02/03 职场文书
优秀家长事迹材料
2014/05/17 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
Moment的feature导致线上bug解决分析
2022/09/23 Javascript