javascript获取上传图片的大小

<pre>
<input id="file" type="file">
<input id="Button1" type="button" value="button" onclick="check()">
<script>
window.check=function(){
var input = document.getElementById("file");
if(input.files){
//读取图片数据
var f = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload=function(){
var width = image.width;
var height = image.height;
alert(width+'======'+height+"====="+f.size);
};
image.src= data;
};
reader.readAsDataURL(f);
}else{
var image = new Image();
image.onload =function(){
var width = image.width;
var height = image.height;
var fileSize = image.fileSize;
alert(width+'======'+height+"====="+fileSize);
}
image.src = input.value;
}
}
</script>
</pre>

javascript获取上传图片的大小的更多相关文章

  1. ASP.NET获取上传图片的大小

    1.采用客户端javascript可以取得图片大小 <input id="FileUpload" type="file" size="30&qu ...

  2. Javascript 获取窗口的大小和位置

    在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分).对于IE6 及 ...

  3. 关于前端使用JavaScript获取base64图片大小的方法

    base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...

  4. jquery 获取上传图片的大小(或者本张图片的其它属性)

    <input type="file" name="upload" style="display:none;" src="${ ...

  5. Javascript 验证上传图片大小[客户端验证]

    需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...

  6. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  7. 微信小程序---获取上传图片大小

    wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: funct ...

  8. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  9. JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + " ...

随机推荐

  1. TCP方式的传输

    TCP 客户端 先创建socket对象建立tcp客户端,明确服务端的地址和端口,必须与服务端对应,要不然对方收不到消息,就像快递填错了送货地址. Socket s = new Socket(" ...

  2. Centos7安装及配置DHCP服务

    DHCP服务概述: 名称:DHCP  - Dynamic Host Configuration Protocol  动态主机配置协议. 功能:DHCP(Dynamic Host Configurati ...

  3. 解决Maven依赖jar包冲突总结

    maven导入jar包中的一些概念:      直接依赖:项目中直接导入的jar包,就是该项目的直接依赖包.      传递依赖:项目中没有直接导入的jar包,可以通过项目直接依赖jar包传递到项目中 ...

  4. JVM系列一:JVM内存模型

    今天起开始总结JVM.自己也看了好多JVM相关的知识,在此做个总结. 打算分为五个部分来讲:JVM内存模型.JVM类加载机制.JVM垃圾回收机制.JVM启动参数设置及优化.JVM其他相关. 今天首先来 ...

  5. RF自定义库和关键字

    1:在D:\work_software\python\Lib\site-packages 文件夹下, 新建python package文件夹 ,例如我的是TestLibrary 建好后的完整路径:D: ...

  6. ‎Cocos2d-x 学习笔记(14.1) Event EventCustom EventListener

    1. Event EventCustom 所有事件类继承了Event. Event中的枚举,定义了事件的类型: enum class Type { TOUCH, //触摸 KEYBOARD, //键盘 ...

  7. opencv::霍夫变换-直线

    霍夫直线变换介绍 Hough Line Transform用来做直线检测 前提条件 – 边缘检测已经完成 平面空间到极坐标空间转换 对于任意一条直线上的所有点来说,变换到极坐标中,从[0~360]空间 ...

  8. python学习-列表、元组和字典(三)

    学习笔记中的源码:传送门 3.1 列表和元组 3.2 不同类型变量的初始化: 数值 digital_value = 0 字符串 str_value = "" 或 str_value ...

  9. Hive On HBase实战

    1.概述 HBase是一款非关系型.分布式的KV存储数据库.用来存储海量的数据,用于键值对操作.目前HBase是原生是不包含SQL操作,虽然说Apache Phoenix可以用来操作HBase表,但是 ...

  10. 【Leetcode 做题学算法周刊】第一期

    首发于微信公众号<前端成长记>,写于 2019.10.28 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 1. ...