如何拖拽文件到指定位置，具體方法如下
在從本地上傳圖片的時候，如果使用拖拽效果，想想應該是更加的高大上，下面直接上代碼
完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height: 300px; border:1px solid red; font-size: 40px; text-align: center; background: lightyellow; background-repeat: no-repeat; background-size: 100%; } #dropBox div{ margin:50px auto; width: 140px; } </style> </head> <body> <div id="dropBox"> <div>拖動你的圖片到這里</div> </div> <script type="text/javascript"> var dropBox; window.onload=function(){ dropBox = document.getElementById("dropBox"); // 鼠標進入放置區時 dropBox.ondragenter = ignoreDrag; // 拖動文件的鼠標指針位置放置區之上時發生 dropBox.ondragover = ignoreDrag; dropBox.ondrop = drop; } function ignoreDrag(e){ // 確保其他元素不會取得該事件 e.stopPropagation(); e.preventDefault(); } function drop(e){ e.stopPropagation(); e.preventDefault(); // 取得拖放進來的文件 var data = e.dataTransfer; var files = data.files; // 將其傳給真正的處理文件的函數 var file = files[0]; var reader = new FileReader(); reader.onload=function(e){ dropBox.style.backgroundImage = "url('"+e.target.result+"')"; } reader.readAsDataURL(file); } </script> </body> </html> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
