如何用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 相关文章推荐
JS控制日期显示的小例子
Nov 23 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
Highcharts入门之简介
Aug 02 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
js绘制一条直线并旋转45度
Aug 21 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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基于自定义函数记录log日志方法
2017/07/21 PHP
动态加载JS文件的三种方法
2013/11/08 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
原生js实现日历效果
2020/03/02 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
python2.7实现FTP文件下载功能
2018/04/15 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python高斯消除矩阵
2019/01/02 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
婚庆司仪主持词
2014/03/15 职场文书
借款协议书
2014/04/12 职场文书
捐助倡议书范文
2014/04/15 职场文书
白血病捐款倡议书
2014/05/14 职场文书
调任通知
2015/04/21 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
音乐研修感悟
2015/11/18 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
业余无线电通联Q语
2022/02/18 无线电
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android