js實現拖拽文字到頁面，讀取文字內容到textarea
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto; box-shadow: 0 0 10px 5px rgba(0,0,0,.8); border-radius: 10px; line-height: 400px; text-align: center; font-size: 30px; font-weight: 700; text-shadow:0 0 5px; transition:all 1s; } .box #entity{ width: 100%; height: 100%; } </style> </head> <body> <div class="box">拖拽外部檔案至此</div> <script type="text/javascript"> // 需求：拖拽外部檔案到當前頁面進行解析 // 獲取目標元素 var box = document.querySelector('.box'); // (1)需要解決一旦拖拽外部檔案就覆蓋掉當前頁面的問題 // 解決：給document繫結drop事件 // drop事件預設觸發不了，需要在dragover事件裡面阻止預設事件 document.ondrop = function(e){ e.preventDefault(); } // 這個阻止預設事件是為了讓drop事件得以觸發 document.ondragover = function(e){ e.preventDefault(); } box.ondragenter = function(){ box.style.boxShadow = '0 0 10px 5px rgba(255,0,0,.8)'; } box.ondrop = function(e){ // console.log(e); // 得到拖拽過來的檔案 var dataFile = e.dataTransfer.files[0]; // FileReader例項化 var fr = new FileReader(); // 非同步讀取檔案 fr.readAsText(dataFile); // 讀取完畢之後執行 fr.onload = function(){ // 獲取得到的結果 var data = fr.result; var ta = document.createElement('textarea'); ta.value = data; ta.id='entity'; box.innerHTML = ''; box.appendChild(ta); } } </script> </body> </html>