效果图
实现代码
<style>
.dropzone {
width: 200px;
height: 100px;
border: 2px dashed #ddd;
text-align: center;
padding-top: 100px;
color: #999;
}
.preview img {
width: 100px;
height: 100px;
}
</style>
<div id="dropzone" class="dropzone">
拖拽文件到此处
</div>
<div id="preview" class="preview">
</div>
<script>
function handleFiles(files) {
var preview = document.getElementById('preview')
for (var i = 0; i < files.length; i++) {
var file = files[i]
// 正则表达式, 用来过滤非图片类型
var imageType = /image.*/
// 利用正则表达式查看是否是图片格式
// file.type,查看文件类型,如果是图片格式则为image.开头。
if (!file.type.match(imageType)) {
continue
}
// 创建img
var img = document.createElement("img")
// 将文件对象存起来
img.file = file
// 新建 FileRead 对象
var reader = new FileReader()
// FileReader在读取文件时是异步执行的(JS中许多对象都有类似API),因此需要通过绑定其load事件来访问文件读取的结果
// 要注意,这里使用了闭包,因为img只保存当前函数(handleFiles)内的引用,
// for循环并不会创建新的作用域
// 因此要通过一个闭包的形式拷贝一份img的引用,否则img在for循环结束后将只引用最后一次创建的img元素。
reader.onload = (function(aImg) {
return function(e) {
// e.target.result 包含读取到的 dataURL信息
aImg.src = e.target.result
// 将图片插入当前文档
preview.appendChild(aImg)
}
})(img)
reader.onprogress = function (e) {
console.log('当前已加载:' + (e.loaded / e.total * 100).toFixed(2)
+ '%')
}
// readAsDataURL方法将file对象读取为dataURL
reader.readAsDataURL(file)
}
}
var dropzone = document.getElementById('dropzone')
dropzone.addEventListener('drop', function (e) {
handleFiles(e.dataTransfer.files)
e.preventDefault()
// 每一次拖放操作,Firefox都会执行一次新开一个页面的动作,并且自动搜索dataTransfer.getData()得到的内容。
// 不再派发事件。解决Firefox浏览器,打开新窗口的问题。
e.stopPropagation()
}, false)
dropzone.addEventListener('dragover', function (e) {
// event.preventDefault()方法是用于阻止浏览器的默认行为,
// 例如,当点击提交按钮时阻止对表单的提交。
// 但此方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。
if (e.preventDefault) {
e.preventDefault()
}
return false
}, false)
</script>