从操作系统拖拽图片到指定区域进行预览-优快云博客

本文介绍了一种通过拖拽方式将图片文件上传至浏览器并实时预览的技术实现方案。利用HTML5的拖放API与FileReader接口，该方法允许用户直接将图片从文件夹拖拽到指定区域进行即时展示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo2 {
            margin: 20px;
        }
        #demo2 .preview {
            height: 300px;
            background: #ddd;
        }
        #demo2 li {
            float: left;
            margin-left: 40px;
        }
        #demo2 img {
            max-height: 150px;
            width: auto;
        }
    </style>

</head>
<body>
<div id="demo2">
    <h3>从文件夹中拖拽图片到下面的区域进行预览</h3>
    <ul class="preview"></ul>
</div> <!-- demo2 -->

<script>
    (function (w) {
        var doc = w.document;

        var dnd = {
            init: function () {
                var me = this;
                var preview = doc.querySelector('#demo2 .preview');

                preview.addEventListener('dragover', function (e) {
                    e.preventDefault();
                }, false);

                preview.addEventListener('drop', function (e) {
                    // 操作系统拖放文件到浏览器需要取消默认行为
                    e.preventDefault();

                    [].forEach.call(e.dataTransfer.files, function (file) {
                        if (file && file.type.match('image.*')) {
                            var reader = new FileReader();

                            reader.onload = function (e) {
                                var img = doc.createElement('img');
                                img.src = e.target.result;
                                var li = doc.createElement('li');
                                li.appendChild(img);
                                preview.appendChild(li);
                            };

                            reader.readAsDataURL(file);
                        }
                    });
                }, false);
            }

        };

        dnd.init();
    }(window));
</script>
</body>
</html>