php获取上传图片的宽高,FileReader获取上传图片的宽高

前言

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

以饿了么上传插件为例

drag

:action="/upload"

accept="image/png, image/jpeg, image/gif, image/jpg"

:headers="headers"

:on-success ="successUploads"

:before-upload ="uploadyanzheng"

name="image"

multiple>

将文件拖到此处，或 点击上传

上传前的验证：

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 上传

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介绍

用法-访问选择的文件

可以通过

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);

}

}

关于上传

FileReader预览上传图片(2018-09-21补充)

这个案例是参考张鑫旭的直接剪切板粘贴上传图片的前端JS实现,

这里也用到了FileReader，所以在这里补充一下：

HTML代码：

JS代码：

document.addEventListener('paste', function (event) {

var items = (event.clipboardData || window.clipboardData).items;

var file = null;

if (items && items.length) {

// 搜索剪切板items

for (var i = 0; i < items.length; i++) {

if (items[i].type.indexOf('image') !== -1) {

file = items[i].getAsFile();

break;

}

}

} else {

log.innerHTML = '当前浏览器不支持';

return;

}

if (!file) {

log.innerHTML = '粘贴内容非图片';

return;

}

// 此时file就是我们的剪切板中的图片对象

// 如果需要预览，可以执行下面代码

var reader = new FileReader()

reader.onload = function(event) {

preview.innerHTML = '';

}

reader.readAsDataURL(file);

// 如果不需要预览，上面这段可以忽略

// 这里是上传

var xhr = new XMLHttpRequest();

// 上传进度

if (xhr.upload) {

xhr.upload.addEventListener('progress', function (event) {

log.innerHTML = '正在上传，进度：' + Math.round(100 * event.loaded / event.total) / 100 + '%';

}, false);

}

// 上传结束

xhr.onload = function () {

var responseText = xhr.responseText;

log.innerHTML = '上传成功，地址是：' + responseText;

};

xhr.onerror = function () {

log.innerHTML = '网络异常，上传失败';

};

xhr.open('POST', './upload.php', true);

xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));

xhr.send(file);

});