【H5】拖拽并显示图片

效果图

实现代码

<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>