获取图片上传前的宽高

有时候我们需要对上传的图片做一些限制,我在vue里面用的

var reader = new FileReader();
var that = this;
reader.onload = function(e){
//console.log(e);
    var img = new Image();
    img.src = e.target.result;
    img.onload = function(){
        console.log(this.width, " ", this.height);
        if(this.width != 500 || this.height != 158){
          that.$message.error(‘图片宽高不符合尺寸!!‘);
          that.$refs.upload.abort();
          that.$refs.upload.clearFiles();

      }
    }
}
var url = reader.readAsDataURL(file);
时间: 2024-10-05 12:36:21

获取图片上传前的宽高的相关文章

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

HTML5 FileReader实现图片上传前预览

如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下:

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

前端图片上传前预览

<!DOCTYPE html> <html> <head> <title>图片上传预览</title> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascri

UEditor之基于Java图片上传前后端源码研究

开心一笑 一定要快乐学习,所以学习之前先看个笑话: 刚来北京,租了一个小房,一楼,上淘宝买衣服,选了付钱了联系卖家:"我已付款,请发货."谁知那货直接说:"我看到你地址了,自己上楼来拿吧!我就在你楼上." 拿你妹,老子付了邮费的...送下来. 提出问题 Ueditor前后端源码的学习和简单的研究??? 解决问题 前提: 假如你已经看了我的前一篇文章,这一点很重要的啊,当然不看也可以,因为你已经是一个高手,就像我一样,哈哈: 假如你已经安装tomcat服务器: 假如你

图片上传前压缩 lrz库

之前手机微信端的项目因为图片太大导致体验十分不流畅,后来采用把上传的图片统一压缩大小后解了燃眉之急. 但这个方法的遗憾就是得等到图片上传后在服务器端压缩,用户如果上传比较大的图片耗时太大,而且也耗流量. 关键是在用户上传前就把图片压缩了,如今找到了解决方法: 用了lrz这个库,http://www.jq22.com/jquery-info3419,感谢这个地址 平常手机照片2M的图一般能压缩到150kb左右,效果明显 首先引入三个库文件 <script type="text/javascr

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

UEditor之基于Java图片上传前后端源码研究 (转)

http://blog.csdn.net/huangwenyi1010/article/details/51637439 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用哪些代码, 不卖关子,很明显,会调用后端的controller.jsp代码,因为我们已经在ueditor.config配置了: // 服务器统一请求接口路径 , serverUrl: URL