1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Document</title>
  5. </head>
  6. <body>
  7. <div>
  8. <input type="file" id="files" style="display: none" onchange="fileImport();">
  9. <input type="button" id="fileImport" value="导入">
  10. </div>
  11. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  12. <!-- <script src="../js/jQuery/jquery-1.11.1.js"></script> -->
  13. <script>
  14. $("#fileImport").click(function() {
  15. $("#files").click();
  16. })
  17. function fileImport() {
  18. //获取读取我文件的File对象
  19. var selectedFile = document.getElementById('files').files[0];
  20. var name = selectedFile.name; //读取选中文件的文件名
  21. var size = selectedFile.size; //读取选中文件的大小
  22. console.log("文件名:" + name + "大小:" + size);
  23. var reader = new FileReader(); //这是核心,读取操作就是由它完成.
  24. reader.readAsText(selectedFile); //读取文件的内容,也可以读取文件的URL
  25. reader.onload = function() {
  26. //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
  27. console.log(this.result);
  28. }
  29. }
  30. </script>
  31. </body>
  32. </html>