关于使用input直接传输图片到页面里面

来源：互联网发布：淘宝高仿椰子编辑：程序博客网时间：2024/04/30 20:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>请上传一张图片：</label>
<input type="file" id="file" onchange="readAsDataURL()" />
<div id="result"></div>
</body>
<script>
//得到存放图片的div
var result = document.getElementById("result");
//检查浏览器四否支持FileReader这个属性
if(typeof FileReader == 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持FileReader";
}
// 将文件以Data URL形式进行读入页面
function readAsDataURL() {
//获取文件（file）对象
var simpleFile = document.getElementById("file").files[0];
console.log(simpleFile);
console.log(simpleFile.type);
// 检查是否为图像类型
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
}
//创建一个reader实例对象
var reader = new FileReader();

// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
//文件读取成功的时候触发这个函数
reader.onload = function() {
//console.log(this.result);
result.innerHTML = '<img src="' + this.result + '" alt=""/>';
}
}
</script>
</html>

0 0