Html5 簡單拖拽讀取文件

時間 2019-11-17

標籤 html5 html 簡單讀取文件欄目 HTML5 简体版

原文原文鏈接

html5 拖拽須要監聽以下事件

ondragenter 拖拽進入
ondragleave 拖拽離開
ondragover 懸停
ondrop 鬆手

element添加事件

oDiv.addEventListener("dragenter",function(),false);
oDiv.addEventListener("dragleave",function(),false);
oDiv.addEventListener("dragover",function(ev){ ev.preventDefault();//取消事件的默認動做，防止瀏覽器打開文件 },false);
oDiv.addEventListener("drop",function(){ ev.preventDefault();//取消事件的默認動做，防止瀏覽器打開文件 },false);

文件讀取

let reader = new FileReader() ;
文件讀取主要事件javascript

reader.onload = function(){}; //文件讀取完調用
reader.onerror = function(){}; //文件讀取失敗
reader.result //文件讀取到的結果

文件讀取的方式css

reader.readerAsText(oFile) 讀取文本
reader.readerAsDataURL(ofile) base64 --圖片
reader.readerAsArrayBuffer(ofile) 包含一個 ArrayBuffer 對象以表示所讀取文件的數據不實用
reader.readerAsBinaryString(ofile) 讀取文件二進制的文本形式數據用於上傳

代碼實例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件拖拽</title>
    <style> #div1 { width: 500px; height: 500px; background: #cccccc; border: 1px solid #000000; text-align: center; line-height: 500px; } </style>
    <script> window.onload = function () { var div1 = document.getElementById("div1"); //拖拽進入 div1.addEventListener("dragenter", function () { div1.innerHTML = "請鬆手" ; }, false); //拖拽離開 div1.addEventListener("dragleave", function () { div1.innerHTML = "拖到這裏上傳" ; }, false); //懸停 div1.addEventListener("dragover", function (ev) { ev.preventDefault();//取消事件的默認動做，防止瀏覽器打開文件 }, false); //鬆手 div1.addEventListener("drop", function (ev) { ev.preventDefault();//取消事件的默認動做。 let fileReader = new FileReader() ; let file = ev.dataTransfer.files[0] ; fileReader.onload = function(){ alert("成功"+this.result); } fileReader.onerror = function(){ alert("讀取失敗"); } fileReader.readAsText(file) ; }, false); } </script>
</head>

<body>
    <div id="div1">拖到這裏上傳</div>
</body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。