HTML5 - 通过拖拽读取图片文件（将电脑中图片拖入浏览器并显示）
作者：hangge | 2016-03-09 08:40
下面样例演示上传图片预览功能。图片的选择，除了可以使用文件上传控件选择图片，也可以直接把图片拖放到虚线框中。
2，页面代码
1，实现原理
（1）为了处理放置文件的操作，需要处理三个事件：ondragenter、ondragover和ondrop。
（2）处理图片用的是 readAsDataURL() 方法，其得到的数据URL是一种用长字符串表示图片的方式。为了在网页中显示图片，可以将 <img> 元素的src属性设置为图片URL，也可也将CSS的 background-image 属性设置为图片URL（本例采用此方式）
（3）这里将显示图片的<div>的 background-size 设为100%，为了缩小图片以全部显示。并将 background-repeat 设为 no-repeat，不让图片重复显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read Image</title>
<style>
#dropBox {
margin: 15px;
width: 250px;
height: 250px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
#dropBox div {
margin: 75px 45px;
color: orange;
font-size: 25px;
font-family: Verdana, Arial, sans-serif;
}
input {
margin: 15px;
}
</style>
<script>
var dropBox;
window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e) {
//因为我们在处理拖放，所以应该确保没有其他元素会取得这个事件
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
//取消事件传播及默认行为
e.stopPropagation();
e.preventDefault();
//取得拖进来的文件
var data = e.dataTransfer;
var files = data.files;
//将其传给真正的处理文件的函数
processFiles(files);
}
function processFiles(files) {
var file = files[0];
var output = document.getElementById("fileOutput");
//创建FileReader
var reader = new FileReader();
//告诉它在准备好数据之后做什么
reader.onload = function (e) {
//使用图像URL来绘制dropBox的背景
dropBox.style.backgroundImage = "url('" + e.target.result + "')";
};
//读取图片
reader.readAsDataURL(file);
}
function showFileInput() {
var fileInput = document.getElementById("fileInput");
fileInput.click();
}
</script>
</head>
<body>
<div id="dropBox">
<div>将图片拖放到此处...</div>
</div>
<input id="fileInput" type="file" onchange="processFiles(this.files)">
<img id="thumbnail">
</body>
</html>
全部评论（0）