您的位置：首页 > Web前端 > JavaScript

html5 js 图片上传预览

2016-10-24 16:20 281 查看

首先获取显示图片的位置和input的对象，判断浏览器是否兼容 var img = document.getElementById("img");
var file = document.getElementById("file");
if(!(window.FileReader && window.File && window.FileList && window.Blob)) {
img.alt = '您的浏览器不支持fileReader';
}

然后给input绑定变动事件

file.addEventListener('change', function(e){
var files = this.files;
if(files.length){
// 对文件进行处理，下面会讲解checkFile()会做什么
checkFile(this.files);
}
});

设置处理

// 图片处理
function checkFile(files){
var file = files[0];
var reader = new FileReader();
// show表示<div id='show'></div>，用来展示图片预览的
if(!/image\/\w+/.test(file.type)){
show.innerHTML = "请确保文件为图像类型";
return false;
}
// onload是异步操作
reader.onload = function(e){
//show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
img.src = e.target.result;
}
reader.readAsDataURL(file);
}

下面是一个案例，我简单封装了一下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<input type="file" id="myfile">
<img src="" id="mypic" alt="">
<script type="text/javascript">
function change_pic(img_id, file_id) {
var img = document.getElementById(img_id);
var file = document.getElementById(file_id);
if (!(window.FileReader && window.File && window.FileList && window.Blob)) {
img.alt = '您的浏览器不支持fileReader';
}
file.addEventListener('change', function(e) {
var files = this.files;
if (files.length) {
// 对文件进行处理，下面会讲解checkFile()会做什么
checkFile(this.files);
}
});
// 图片处理
function checkFile(files) {
var file = files[0];
var reader = new FileReader();
// show表示<div id='show'></div>，用来展示图片预览的
if (!/image\/\w+/.test(file.type)) {
show.innerHTML = "请确保文件为图像类型";
return false;
}
// onload是异步操作
reader.onload = function(e) {
//show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
}
change_pic("mypic", "myfile");
//调用方法，change_pic(图片id，文件选择iput框id);

</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航