javascript头像上传的示例分析
这篇文章主要为大家展示了“javascript头像上传的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript头像上传的示例分析”这篇文章吧。
专注于为中小企业提供成都网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业博望免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
上传头像:
相关关键词:
ondragover(拖动元素在投放区内移动)
ondrop (元素放在投放区触发但是要去处理浏览器默认事件的影响:ondragenter、ondragover)
dataTransfer(它可以保存一项或多项数据、一种或多数数据类型,通过它来传输被拖动的数据,以便在拖拽结束的时候,对数据进行其他的操作)
上传头像图片 拖动外部图片或单击上传图片
/* css样式: */ *{ margin: 0; padding: 0; } .container{ width: 50%; margin: 0 auto; height: 400px; padding: 20px; text-align: center; } .main{ width: 200px; height: 200px; border: 2px dashed #666; margin: 20px auto; position: relative; } .main input{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 11; } .main .btn{ width: 150px; height: 150px; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
/* js */ window.onload = function() { // 获取元素 var file = document.querySelector("#file"); var addImg = document.querySelector(".btn"); var main = document.querySelector(".main"); // 封装上传图片操作 function upload(img) { // 实例化一个图片对象 var imgFile = new FileReader(); // 获取图片的路径 imgFile.readAsDataURL(img); imgFile.onload = function(e) { // 将上传图标设置为当前图片 addImg.src = e.target.result; } } /* 1.点击上传图片 */ file.onchange = function(e) { // 获取上传图片里面的信息 var img = e.target.files[0]; upload(img); } /* 2、拖拽上传 */ main.ondragover = function() { return false; } main.ondrop = function(e) { upload(e.dataTransfer.files[0]); return false; } }
以上是“javascript头像上传的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页标题:javascript头像上传的示例分析
文章分享:http://pwwzsj.com/article/jggssd.html