如何用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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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实现paypal整合方法
2010/11/28 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
XML文档面试题
2015/08/05 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
行政总监岗位职责
2013/12/05 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
北京天坛导游词
2015/02/12 职场文书
宇宙与人观后感
2015/06/05 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis