图片在浏览器局部拖放

xiaoxiao2021-02-27  135

学习了拖放之后大家有没有想在浏览器局部显示图片? 制作一个照片墙呢?

下面是一些实例代码。

<body> <div id="imgContainer"></div> <div id="info"></div> </body> <script> var imgContiner = document.getElementById("imgContainer"); imgContiner.ondragover = function(event){ event.preventDefault(); }; imgContiner.ondrop = function(event){ event.preventDefault(); /* infoShow(event.dataTransfer.files[0]);*/ var file = event.dataTransfer.files[0]; var fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = function(e){ /* infoShow(fileReader);*/ imgContiner.innerHTML = "<img src='"+fileReader.result+"'>"; }; }; // 如果for in 遍历的是 function infoShow(obj){ var allInfo = ""; for(var key in obj){ allInfo += key+":"+obj[key]+"<br>" } var info = document.getElementById("info"); info.innerHTML = allInfo; } </script>

转载请注明原文地址: https://www.6miu.com/read-13283.html

最新回复(0)