<!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 (); // because they are hidden, so that a function call using a click event to imitate manual } functionselectedFile () { IF ( . 1 ) { var selectedFile = document.getElementById ( ' File0 ' ) .files [ 0 ]; var name = selectedFile.name; // read the selected file name var size = selectedFile.size; / / read size of the selected file the console.log ( " file name: " + name + " size: " + size); var Reader = new new the FileReader (); //This is the core, from which the read operation is completed. Reader.readAsText (selectedFile); // read the contents of a file, the file can be read the URL reader.onload = function () { // when read completion callback this function, and at this time the contents of the file stored in the result, the operator can direct the console.log ( the this .Result); } } } </ Script >