未加星标

FileReader获取上传图片的宽高

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
前言

input upload 图片上传,经常要判断上传图片的宽高。除了运用一些上传插件可以获取。原生的上传方式也可以获取,下面就说一下如何获取上传图片的宽高。

以饿了么上传插件为例 <el-upload drag :action="/upload" accept="image/png, image/jpeg, image/gif, image/jpg" :headers="headers" :on-success ="successUploads" :before-upload ="uploadyanzheng" name="image" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> </el-upload>

上传前的验证:

uploadyanzheng(file) { let _this = this //普通的判断可以用return false // 获取文件尺寸,判断尺寸在不在规定范围之内 return new Promise(function(resolve, reject) { let reader = new FileReader() reader.readAsDataURL(file) reader.onload = function(theFile) { let image = new Image() image.src = theFile.target.result image.onload = function() { let csize = `${this.width}*${this.height}` if (!_this.creativeSize.includes(csize)) {//this.creativeSize是可以上传的尺寸列表数组 _this.$message.error(`${file.name}尺寸不对,请重新上传!`) reject('图片尺寸不对') } else { file.width = this.width file.height = this.height resolve(file) } } } }) }, 普通input file 上传 <input type="file" size="20" autocomplete="off" id="upload_img" name="Uploadfile"> var MyTest = document.getElementById("upload_img").files[0]; var reader = new FileReader(); reader.readAsDataURL(MyTest); reader.onload = function(theFile) {   var image = new Image(); image.src = theFile.target.result; image.onload = function() {   alert("图片的宽度为"+this.width+",长度为"+this.height); }; }; FileReader介绍

FileReader()是一个构造函数,关于该函数的详细介绍,可以查看: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

用法-访问选择的文件

可以通过

<input type="file" id="input" multiple onchange="handleFiles(this.files)"> <div id="haorooms"></div> function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image\//; if (!imageType.test(file.type)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; $("#haorooms").appendChild(img); // 把上传的图片添加到展示的div中 var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } 关于上传

关于图片上传,我之前也有类似文章, input file 文件上传,js控制上传文件的大小和格式 及 accept设置 等

css input[type=file] 样式美化

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: file,lt,gt,image,上传,reader,upload,function,var,img,FileReader,input,new,div
分页:12
转载请注明
本文标题:FileReader获取上传图片的宽高
本站链接:https://www.codesec.net/view/586421.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(81)