如何用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中删除指定数组中指定的元素的代码
Feb 12 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
JavaScript 异步调用
Oct 25 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
js实现简单商品筛选功能
Feb 02 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
图象函数中的中文显示
2006/10/09 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP微信支付实例解析
2016/07/22 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JQuery基础语法小结
2015/02/27 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
员工保密协议书
2014/09/27 职场文书
学生上课说话检讨书
2014/10/25 职场文书
医德医风个人总结
2015/02/28 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript