炫意html5
最早CSS3和HTML5移动技术网站之一

FileReader获取上传图片的宽高

前言

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></i>
<div>将文件拖到此处,或<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" 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" multiple onchange="handleFiles(this.files)">
<div></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;
$("#炫H5").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] 样式美化

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

这个案例是参考张鑫旭的直接剪切板粘贴上传图片的前端JS实现,
这里也用到了FileReader,所以在这里补充一下:

HTML代码:

<div></div>
<p></p>

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 = '<span>当前浏览器不支持</span>';
return;
}
if (!file) {
log.innerHTML = '<span>粘贴内容非图片</span>';
return;
}
// 此时file就是我们的剪切板中的图片对象
// 如果需要预览,可以执行下面代码
var reader = new FileReader()
reader.onload = function(event) {
preview.innerHTML = '<img src="' + event.target.result + '">';
}
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 = '<span>网络异常,上传失败</span>';
};
xhr.open('POST', './upload.php', true);
xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));
xhr.send(file);
});

炫意HTML5 » FileReader获取上传图片的宽高

Java基础教程Android基础教程