语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS拖动图片或文件获取BASE64编码及文件名

HDHCMS拖动图片或文件获取BASE64编码及文件名

2019/12/2 11:36:00 0人评论 188次 作者:admin

HDHCMS拖动图片或文件获取BASE64编码及文件名…

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>HDHCMS拖动图片或文件获取BASE64编码及文件名</title>

    <style>

        #hdhCmsUpBox {

            width: 400px;

            height: 400px;

            font-size: 38px;

            background: #f00;

            background-repeat: no-repeat;

            background-size: 100%;

        }


            #hdhCmsUpBox div {

                display: block;

                width: 130px;

                position: absolute;

                margin: 100px auto;

                color: #fff;

                left: 130px;

            }

    </style>

</head>

    <script type="text/javascript">

        var hdhCmsUpBox;

        window.onload = function () {

            hdhCmsUpBox = document.getElementById("hdhCmsUpBox");

            // 鼠标进入放置区时

            hdhCmsUpBox.ondragenter = hdhCmsMouseIn;

            // 拖动文件的鼠标指针位置放置区之上时发生

            hdhCmsUpBox.ondragover = hdhCmsMouseIn;

            hdhCmsUpBox.ondrop = hdhCmsMouseDrop;

        }

        function hdhCmsMouseIn(e) {

            // 确保其他元素不会取得该事件

            e.stopPropagation();

            e.preventDefault();

        }

        function hdhCmsMouseDrop(e) {

            e.stopPropagation();

            e.preventDefault();


            // 取得拖放进来的文件

            var hdhCmsData = e.dataTransfer;

            var hdhCmsFiles = hdhCmsData.files;

            // 将其传给真正的处理文件的函数


            var hdhCmsFile = hdhCmsFiles[0];

            alert(hdhCmsFile.type);

            alert(hdhCmsFile.name);

            var reader = new FileReader();

            reader.onload = function (e) {

                alert(e.target.result);

                hdhCmsUpBox.style.backgroundImage = "url('" + e.target.result + "')";

            }

            reader.readAsDataURL(hdhCmsFile);

        }

    </script>

<body>

    <div id="hdhCmsUpBox">

        <div>拖动你的图片到这里</div>

    </div>

</body>

</html>


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【弗吉尼亚州 】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮