<!DOCTYPE html> <html> <div id="container" onclick="choosefile();"> <div style="text-align:center">Drag and drop files here to upload.</div> <input type="file" id="file0" style="display: none" onchange="selectedFile();"> </div> </html> <style type="text/css"> #container{ min-width: 400px; min-height: 280px; border: 2px dotted #000; -moz-border-radius: 8px; background-color:yellow; } </style> <script type="text/javascript"> function choosefile() { var f = document.getElementById("file0"); f.click();//因為被隱藏了，所以用一個函數調用模仿手動點擊事件 } function selectedFile(){ if(1){ var selectedFile = document.getElementById('file0').files[0]; var name = selectedFile.name;//讀取選中文件的文件名 var size = selectedFile.size;//讀取選中文件的大小 console.log("文件名:"+name+"大小:"+size); var reader = new FileReader();//這是核心,讀取操作就是由它完成. reader.readAsText(selectedFile);//讀取文件的內容,也可以讀取文件的URL reader.onload = function () { //當讀取完成后回調這個函數,然后此時文件的內容存儲到了result中,直接操作即可 console.log(this.result); } } } </script>