前端开发者| 前端开发怎么算精通 |
| 女生前端开发英文怎么说 |
| 前端开发怎么调用数据库 |
html 代码
<!DOCTYPE html>
<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
评论前必须登录！
注册