前几天在浏览器的一个网站上想转换照片变成视频，发现拖进去的图片转换成了64位的base码，所以想着自己写一下
首先有一个div用来装照片，一个盒子用来装转好的base码 2. 阻止图片拖入页面的打开事件
// 取消网页自动打开图片的事件 document.ondragover = function(e) { // 阻止dragover的默认行为，触发drop e.preventDefault(); } document.ondrop = function(e) { // 取消打开事件 e.preventDefault(); } 获取目标元素，取消目标元素上的默认事件，触发drop事件 var box = document.getElementsByClassName('box')[0]; var text = document.querySelector('.text'); box.ondragover = function(e) { e.preventDefault(); //让目标元素有drop事件 } 拖拽事件开始常用的一些属性
DataTransfer.dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型DataTransfer.effectAllowed 提供所有可用的操作类型DataTransfer.files 包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。DataTransfer.items 只读提供一个包含所有拖动数据列表的 DataTransferItemList 对象。DataTransfer.types 一个提供 dragstart 事件中设置的格式的 strings 数组。这里用到的属性和方法
FileReader.error 只读 一个DOMException，表示在读取文件时发生的错误FileReader.readyState 只读 表示当前读取的状态 0表示还未加载 1表示加载中 2表示加载完成FileReader.result 只读 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。 开始正题： box.ondrop = function(e) { //清除box if (box.children.length > 0) { box.children[0].remove() } // console.log(e.dataTransfer) // 获取拖入的文件列表 var list = e.dataTransfer.files; var f0 = list[0]; //获取拖入的图片的文件信息 var reader = new FileReader(); reader.readAsDataURL(f0); // console.log(reader) reader.onload = function(e) { var img = new Image(); img.src = reader.result; //获取64位的base码 //将图片显示在盒子中 box.append(img) //将base码传入盒子中 text.innerHTML = reader.result; } }
以上就是全部解释，这里放上一份完整的代码，可以自取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } p { font-size: 30px; text-align: center; } .box { position: relative; margin: 0 auto; border: 1px solid #000; width: 500px; height: 500px; line-height: 500px; font-size: 100px; font-weight: bolder; text-align: center; color: #fff; text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000; overflow: hidden; } .text { margin: 30px auto; width: 500px; height: 100px; border: 1px solid #000; word-wrap: break-word; overflow: auto; } img { position: absolute; top: 0; left: 0; } </style> </head> <body> <p>img转64位</p> <div class="box"> + </div> <div class="text"> </div> <script> document.ondragover = function(e) { e.preventDefault(); } document.ondrop = function(e) { e.preventDefault(); } var box = document.getElementsByClassName('box')[0]; var text = document.querySelector('.text'); box.ondragover = function(e) { e.preventDefault(); } box.ondrop = function(e) { //清除box if (box.children.length > 0) { box.children[0].remove() } // 获取拖入的文件列表 var list = e.dataTransfer.files; var f0 = list[0]; var reader = new FileReader(); reader.readAsDataURL(f0); reader.onload = function(e) { var img = new Image(); img.src = reader.result; //获取64位的base码 box.append(img) text.innerHTML = reader.result; } } </script> </body> </html>