试试html5的拖拉事件和FileReader

最新推荐文章于 2022-08-14 22:50:21 发布

iteye_19332

最新推荐文章于 2022-08-14 22:50:21 发布

阅读量94

点赞数

分类专栏：私人笔记文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19332/article/details/82507810

版权

私人笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <meta charset="utf-8" />
        <title>file test</title>
        <script type="text/javascript">
        (function(window) {
            var zImgUtil = window.zImgUtil || {};

            var handler = function(event, imgHolderDomId, maxWidth) {
                if (!event) {
                    return;
                }

                event.stopPropagation();
                event.preventDefault();

                if (event.type == "drop") {
                    var data = event.dataTransfer;
                    if (!data) {
                        return;
                    }
                    if (!data.files || !data.files[0]) {
                        return;
                    }
                    var file = data.files[0];
                    var fileReader = new FileReader();
                    fileReader.onloadend = function () {
                        var data = this.result.substr(this.result.indexOf(',') + 1);
                        var imgId = "img" + new Date().getTime();
                        document.getElementById(imgHolderDomId).innerHTML = "<img id='" + imgId + "' src='data:" + file.type + ";base64," + data + "' />";
                        if (maxWidth) {
                            var imgDom = document.getElementById(imgId);
                            if (maxWidth < imgDom.width) {
                                var newHeight = maxWidth * imgDom.height / imgDom.width;
                                imgDom.style.width = maxWidth;
                                imgDom.style.height = newHeight;
                            }
                        }
                    };
                    fileReader.readAsDataURL(file);
                }
            };

            zImgUtil.dropAndShow = function(dropOnDomId, imgHolderDomId, maxWidth) {
                var srcDom = document.getElementById(dropOnDomId);
                var handlerWrapper = function(event) {
                    handler(event, imgHolderDomId, maxWidth);
                };
                srcDom.addEventListener("drop", handlerWrapper, false);
                srcDom.addEventListener("dragover", handlerWrapper, false);
                srcDom.addEventListener("dragenter", handlerWrapper, false);
            };

            window.zImgUtil = zImgUtil;
        })(window);

        function init() {
            zImgUtil.dropAndShow("srcLabel", "imgDiv", 200);
        }
        </script>
    </head>
    <body onload="init()">
        <div id="srcLabel" style="border: 1px solid green;min-height: 100px;">
            <label id="srcLabel">拖进框里面试试看</label>
            <div id="imgDiv"></div>
        </div>
    </body>
</html>

iteye_19332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
试试html5的拖拉事件和FileReader

[code="java"] file test (function(window) { var zImgUtil = window.zImgUtil || {}; var handler = function(event, imgH...
复制链接

扫一扫

专栏目录