如何用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 操作select下拉列表框的一点小经验
Mar 20 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 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 shell命令合并图片的代码
2011/06/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
青春无悔演讲稿
2014/05/08 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python