前端开发将图片拖到网页中

前端开发怎么算精通
女生前端开发英文怎么说
前端开发怎么调用数据库

html 代码

<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title></title>
        <style>
            #container {
                border: 1px solid #aaa;
                border-radius: 3px;
                padding: 10px;
                margin: 10px;
                width: 200px;
                min-height: 400px;
            }
            #container > img {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h4>请拖动您的照片到下方方框区域</h4>
        <div id=”container”></div>
        <script>
            //监听document的drop事件——取消其默认行为:在新窗口中打开图片
            document.ondragover = function(e) {
                e.preventDefault() //使得drop事件可以触发
            }
            document.ondrop = function(e) {
                e.preventDefault() //阻止在新窗口中打开图片,否则仍然会执行下载操作!!!
            }
            //监听div#container的drop事件,设法读取到释放的图片数据,显示出来
            container.ondragover = function(e) {
                e.preventDefault()
            }
            container.ondrop = function(e) {
                console.log(‘客户端拖动着一张图片释放了…’)
                var f0 = e.dataTransfer.files[0]
                //console.log(f0); //文件对象 File
                //从文件对象中读取数据
                var fr = new FileReader()
                //fr.readAsText(f0); //从文件中读取文本字符串
                fr.readAsDataURL(f0) //从文件中读取URL数据
                fr.onload = function() {
                    console.log(‘读取文件完成’)
                    console.log(fr.result)
                    var img = new Image()
                    img.src = fr.result //URL数据
                    container.appendChild(img)
                }
            }
        </script>
    </body>
</html>
前端开发中怎么添加断点
html前端开发 空格怎么打
前端聊天室怎么开发
» 本文来自:前端开发者 » 《前端开发将图片拖到网页中》
» 本文链接地址:https://www.rokub.com/8141.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!