如何用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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
微信小程序button标签open-type属性原理解析
Jan 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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Python制作刷网页流量工具
2017/04/23 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
公积金转移接收函
2014/01/11 职场文书
法学院方阵解说词
2014/01/29 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Java Spring Lifecycle的使用
2022/05/06 Java/Android
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python