当上传图片时,有时候需要控制下上传图片的尺寸大小,需要给个提示

//获取图片的尺寸,控制尺寸大小
var reader = new FileReader(),
img = new Image();
// 选择的文件对象
var file = null;
$('#jjfxSoft_iconPath,#jjfxSoft_screenshotPath,#jjfxSoft_recommendPath').on('change', function (event) {
file = event.target.files[];
var excuteId = this.id;
// 选择的文件是图片
if (file.type.indexOf("image") == ) {
reader.readAsDataURL(file);
}
// 文件base64化,以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result; // base64地址图片加载完毕后
img.onload = function(){
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = , maxHeight = ;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
dialogMsg("图片过大,请选择400*400以下的图片",);
$("#"+excuteId).val("");
return false;
}
};
};
})

js获取上传图片的尺寸大小的更多相关文章

  1. js获取图片的真实大小,字节大小

    在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...

  2. js获取上传图片真实的尺寸大小和存储大小

    https://blog.csdn.net/u014236259/article/details/52885591 ****************************************** ...

  3. js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度

    html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...

  4. 【记录】JS 获取图片原始尺寸-防止图片溢出

    示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...

  5. 获取IOS屏幕尺寸大小

    转自:http://www.open-open.com/lib/view/open1395752090322.html 1.app尺寸,去掉状态栏 CGRect r = [ UIScreen main ...

  6. js获取图片的尺寸

    $("<img/>").attr("src", "http://www.example.com/images/bag001.jpg&quo ...

  7. js获取浏览器窗口的大小

    在我本地测试当中: 在IE.FireFox.Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便. ...

  8. js限制上传图片类型和大小

    <script type="text/javascript"> function checkFile(brandLogo){ var file=brandLogo.va ...

  9. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

随机推荐

  1. 【bzoj3829】[Poi2014]FarmCraft 贪心

    原文地址:http://www.cnblogs.com/GXZlegend/p/6826667.html 题目描述 In a village called Byteville, there are   ...

  2. ndk开发-ffmpeg编译

    进入模拟器shell: D:\Users\zhouhaitao\AppData\Local\Android\sdk\platform-tools\adb shell ndk编译链接静态库: LOCAL ...

  3. [poj] 1389 Area of Simple Polygons

    原题 线段树+扫描线 对于这样一个不规则图形,我们要求他的面积有两种方法,割和补. 补显然不行,因为补完你需要求补上去的内部分不规则图形面积-- 那么怎么割呢? 像这样: 我们就转化成了无数个矩形的和 ...

  4. 论文笔记《Hand Gesture Recognition with 3D Convolutional Neural Networks》

    一.概述 Nvidia提出的一种基于3DCNN的动态手势识别的方法,主要亮点是提出了一个novel的data augmentation的方法,以及LRN和HRn两个CNN网络结合的方式. 3D的CNN ...

  5. 大工程(bzoj 3611)

    Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道.  我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上.  在 2 个国家 a,b 之间建一条新通 ...

  6. Jquery插件使用 焦点图插件 MyFocus ,另外记录一款插件 KinMaxShow大背景图插件。

    以前用flash做首页图片轮播.最近的网站里用到一个插件MyFocus插件焦点图插件 用法如下: <script type="text/javascript">     ...

  7. C# 技巧收藏

    IIS HTTP Error 500.21 - Internal Server Error 原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始- ...

  8. QML与C++混合编程详解

    1.QML与C++为什么要混合编程 QML与C++为什么要混合编程,简单来说,就是使用QML高效便捷地构建UI,而C++则用来实现业务逻辑和复杂算法,下面介绍了两者间交互的方法与技巧. 2.QML访问 ...

  9. Linux网络编程一步一步学【转】

    转自:http://blog.chinaunix.net/uid-10747583-id-297982.html Linux网络编程一步一步学+基础  原文地址:http://blogold.chin ...

  10. -webkit-box-flex: 1;属性和 float 属性冲突造成元素看不见的BUG

    今天切图的时候发现了这个问题,样式是这样的: .check-btns-box .check-btn{float: left;-webkit-box-flex: 1;-moz-box-flex: 1;- ...