如何用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动画效果类封装代码
Aug 28 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JavaScript实现音乐播放器
Aug 14 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 HandlerSocket的使用
2011/05/02 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python生成随机红包的实例写法
2019/09/02 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
基于keras中的回调函数用法说明
2020/06/17 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
2014年端午节活动方案
2014/03/11 职场文书
幼儿园小班评语
2014/04/18 职场文书
大学迎新标语
2014/06/26 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android