未分类

www6766comjavascript头像上传代码实例_javascript技巧_脚本之家

7 4月 , 2020  

上传头像:

  上传头像图片     拖动外部图片或单击上传图片       

/* 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; z-index: 11;}.main .btn{ width: 150px; height: 150px; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate;}

/* js */window.onload = function() { // 获取元素 var file = document.querySelector; var addImg = document.querySelector; var main = document.querySelector; // 封装上传图片操作 function upload { // 实例化一个图片对象 var imgFile = new FileReader(); // 获取图片的路径 imgFile.readAsDataURL; imgFile.onload = function { // 将上传图标设置为当前图片 addImg.src = e.target.result; } } /* 1.点击上传图片 */ file.onchange = function { // 获取上传图片里面的信息 var img = e.target.files[0]; upload; } /* 2、拖拽上传 */ main.ondragover = function() { return false; } main.ondrop = function { upload(e.dataTransfer.files[0]); return false; }}

dataTransfer(它能够保存一项或多项数据、一种或大部数据类型,通过它来传输被拖动的多寡,以便在拖拽甘休的时候,对数据开展别的的操作)

如上正是本文的全体内容,希望对大家的求学抱有助于,也愿意我们多多指教脚本之家。

ondrop
(元素放在投放区触发可是要去管理浏览器暗许事件的震慑:ondragenter、ondragover)


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图