与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
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="szhulian"></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);
}
}
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
