这个方法用于获得图片文件的大小:

在FF,Chrome,IE6,IE7,IE8可用,不支持IE9+。(如果是IE9就需要flash插件了)

var getSize = function(oFile,callback){
if(oFile.files&&oFile.files.item){
var item = oFile.files.item(0);
if(item.size!==undefined){
callback(item.size);
}else{
callback(item.fileSize);
}
}else{
var img = new Image();
img.src = oFile.value;
var fn = function(){
if(img.readyState === 'complete'){
callback(img.fileSize);
}else{
setTimeout(fn,500);
}
}
fn();
}
}

演示例子:

<html>
 <head>
  <Meta http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
  <title>获得图片文件大小</title>
 </head>
 <body>
  <input id="oFile" type="file" onchange="javascript:onGetFileSize();" />
  <span id="oConsole"></span>
  <script type="text/javascript">
  
var onGetFileSize = function(){
 var oFile = document.getElementById('oFile');
 getSize(oFile,function(fileSize){
  document.getElementById('oConsole').innerHTML = fileSize;
 }); 

  
var getSize = function(oFile,callback){
 if(oFile.files&&oFile.files.item){
  var item = oFile.files.item(0);
  if(item.size!==undefined){
   callback(item.size);
  }else{
   callback(item.fileSize);
  }
 }else{
  var img = new Image();
  img.src = oFile.value;
  var fn = function(){
   if(img.readyState === 'complete'){
    callback(img.fileSize);
   }else{
    setTimeout(fn,500);
   }
  }  
  fn();
 }
}
  </script>
 </body>
</html>

上传图片时,使用JS获得图片文件大小的更多相关文章

  1. wordpress上传图片时重命名--修改插件时遇到的一些问题

    wordpress是用php语言开发的博客平台,它扩展性强,容易扩展,很适合拿来做二次开发. 1,问题由来 本周五,我在浏览公司的网站(基于wordpress开发)时发现,网站首页上有两篇文章的缩略图 ...

  2. 调试台自动多出现一个'&#65279;' ,我 用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个'&#65279;'

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  3. 上传图片时,使用GDI+中重绘方式将CMYK图片转为RGB图片

    原文:上传图片时,使用GDI+中重绘方式将CMYK图片转为RGB图片 我们知道,如果网站上传图片时,如果用户上传的是CMYK图片,那么在网站上将是无法显示的,通常的现象是出现一个红叉.下面使用将Ima ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  6. 关于 百度 Ueditor 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  7. Ckeditor与Ckfinder的配合使用,上传图片、水印、修改图片名字为当前日期 asp.net

    为了配置出来上传功能,并且还添加水印,修改图片的名字为日期,真的头疼了很久,现在来分享一下自己所做的,也算一点小小的成就吧,顺带帮帮很多还在弄这个的猿们.我是分别用了两种方法.先说低版本的Versio ...

  8. 百度ueditor上传图片时如何设置默认宽高度

    百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...

  9. 前端AntD框架的upload组件上传图片时遇到的一些坑

    前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...

随机推荐

  1. Git系列一之安装管理

    1.Git安装部署 Git是分布式的版本控制系统,我们只要有了一个原始Git版本仓库,就可以让其他主机克隆走这个原始版本仓库,从而使得一个Git版本仓库可以被同时分布到不同的主机之上,并且每台主机的版 ...

  2. C#动态调用webservice方法

    摘 自: http://www.hao5191.cn/a/chengxukaifa/c_/20130109/115819.html using System; using System.Collect ...

  3. Android studio 模拟器中输入中文

    Android studio 模拟器中输入中文 学习了:https://blog.csdn.net/feidie436/article/details/78318752?locationNum=10& ...

  4. 这里先发布一个,自己写得unityUI的适配的方案(插播)

    这个适配是依据坐标系的象限的思想来进项适配的.參考了部分的NGUI的适配方案. 在程序的事实上,来測量UI距离相机边界的像素然后依据比例来进行适配,个人认为还不错. 放码! . 有个前提哦就是你要先定 ...

  5. .net framework中重新注册IIS

    要为 ASP.NET 修复 IIS 映射,请按照下列步骤执行操作:运行 Aspnet_regiis.exe 实用工具:单击“开始”,然后单击“运行”.在“打开”文本框中,键入 cmd,然后按 ENTE ...

  6. ant font 本地化

    要解决的问题1.antd默认iconfont指向的是阿里在公网CDN上部署的url 2.项目需要在本地进行部署,使用的是本地文件的访问方式,希望能内网/离线使用 在ant-design-pro中的配置 ...

  7. bootstrap的两种在input框里面增加一个图标的方式

    具体代码如下: <div class="input-group"> <div class="input-icon-group"> < ...

  8. Android 6.0 超级简单的权限申请 (Permission)

    代码地址如下:http://www.demodashi.com/demo/13369.html 背景描述 随着Android系统的不断升级,谷歌对用户的隐私是越来越注重了,给我们开发者带来了更多的繁琐 ...

  9. js闭包避免内存泄漏 减少内存使用 避免对象无法回收注意事项

    闭包 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. function a ...

  10. ANSI实现动态 sql

    /* 包含C头文件 */ #include <stdio.h> #include <stdlib.h> #include <string.h> /* 包含SQLCA ...