js判断上传图片宽高及文件大小
<input id="file" type="file">
<input id="Button1" type="button" value="button" onclick="check()">
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;
}
}
js判断上传图片宽高及文件大小的更多相关文章
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- JS判断上传图片格式是否正确
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js判断上传图片文件大小,尺寸,格式
/** * 文件宽高 * @param eventId id * @param w 宽度 * @param h 高度 * @param callback 回调函数这里判断图片像素的方法是异步的,所以需 ...
- JS/jQ常用宽高及应用
关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...
- AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- js中各种宽高
各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...
- js获取各种宽高方法
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
随机推荐
- 【C++对象模型】第一章 关于对象
1.C/C++区别 C++较之C的最大区别,无疑在于面向对象,C程序中程序性地使用全局数据.而C++采用ADT(abstract data tpye)或class hierarchy的数据封装.类相较 ...
- zk-web
Ref:https://github.com/qiuxiafei/zk-web zk-web是一个用clojure with noir and boostrap写的Zookeeper WEB UI管理 ...
- NDK---使用,开发步骤
使用NDk的场景: 1.某些方法,是使用C,C++本地代码实现的,然后,我想在Java中调用这些方法.这个时候,就需要使用到JNI技术. 应用NDK的时候,分两个部分,Java部分,JNI层部分,本地 ...
- 【HDU】6148 Valley Numer 数位DP
[算法]数位DP [题意]定义V-number为从左到看单位数字未出现先递增后递减现象的数字,求0~N中满足条件的数字个数.T<=200,lenth(n)<=100 [题解]百度之星201 ...
- 超详细的Java面试题总结(一)之Java基础知识篇
面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的因 ...
- js_判断当前url是否合法http(s)
alert(checkURL('http:555')); //false function checkURL(URL) { var str = URL, Expression = /http(s)?: ...
- python基础===PEP网站,代码规范指南
PEP 8是最古老的PEP之一,它向Python程序员提供了代码格式设置指南.PEP 8的篇幅很长,但大都与复杂的编码结构相关. https://python.org/dev/peps/pep-000 ...
- C#比较两个list集合,两集合同时存在或A集合存在B集合中无
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- centos7下opencv的安装
os:centos7 opencv:opencv3.0.0 for linux reference:http://www.cnblogs.com/xixixing/p/6096057.html det ...
- idea和maven使用的点点滴滴
1.如果在使用maven打包时想跳过单元测试,可以在pom文件中配置如下代码 <build> <plugins> <plugin> <groupId>o ...