Javascript 读取外部的本地json文件 方案1 运行本地web服务器,提供文件服务 方案2 1.data = \'[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]\'; (json文件内部代码) 1.<script type="text/javascript" src="data.json"></script> 2.var mydata = JSON.parse(data); 方案3 1.function readTextFile(file, callback) { 2. var rawFile = new XMLHttpRequest(); 3. rawFile.overrideMimeType("application/json"); 4. rawFile.open("GET", file, true); 5. rawFile.onreadystatechange = function() { 6. if (rawFile.readyState === 4 && rawFile.status == "200") { 7. callback(rawFile.responseText); 8. } 9. } 10. rawFile.send(null); 11.} 12. 13.//usage: 14.readTextFile("/Users/Documents/workspace/test.json", function(text){ 15. var data = JSON.parse(text); 16. console.log(data); 17.}); 另外,这个功能还可以用于加载.html或.txt文件,将mime类型参数覆盖到"text/html","text/plain"等。 方案4 使用FileAPI 1.// 检查文件API的支持 2.if (window.File && window.FileReader && window.FileList && window.Blob) { 3. // 支持. 4.} else { 5. alert(\'这个浏览器不完全支持文件API\'); 6.} 选择文件 1.使用表单输入进行选择文件 1.<input type="file" id="files" name="files[]" multiple /> 2.<output id="list"></output> 1.<script> 2. function handleFileSelect(evt) { 3. var files = evt.target.files; // FileList object 4. // files is a FileList of File objects. List some properties. 5. var output = []; 6. for (var i = 0, f; f = files[i]; i++) { 7. output.push(\'<li><strong>\', escape(f.name), \'</strong> (\', f.type || \'n/a\', \') - \', 8. f.size, \' bytes, last modified: \', 9. f.lastModifiedDate.toLocaleDateString(), \'</li>\'); 10. } 11. document.getElementById(\'list\').innerHTML = \'<ul>\' + output.join(\'\') + \'</ul>\'; 12. } 13. document.getElementById(\'files\').addEventListener(\'change\', handleFileSelect, false); 14.</script> 2.使用拖放进行选择文件 1.<div id="drop_zone">Drop files here</div> 2.<output id="list"></output> 1.<script> 2. function handleFileSelect(evt) { 3. evt.stopPropagation(); 4. evt.preventDefault(); 5. var files = evt.dataTransfer.files; // FileList object. 6. // files is a FileList of File objects. List some properties. 7. var output = []; 8. for (var i = 0, f; f = files[i]; i++) { 9. output.push(\'<li><strong>\', escape(f.name), \'</strong> (\', f.type || \'n/a\', \') - \', 10. f.size, \' bytes, last modified: \', 11. f.lastModifiedDate.toLocaleDateString(), \'</li>\'); 12. } 13. document.getElementById(\'list\').innerHTML = \'<ul>\' + output.join(\'\') + \'</ul>\'; 14. } 15. function handleDragOver(evt) { 16. evt.stopPropagation(); 17. evt.preventDefault(); 18. evt.dataTransfer.dropEffect = \'copy\'; // Explicitly show this is a copy. 19. } 20. // Setup the dnd listeners. 21. var dropZone = document.getElementById(\'drop_zone\'); 22. dropZone.addEventListener(\'dragover\', handleDragOver, false); 23. dropZone.addEventListener(\'drop\', handleFileSelect, false); 24.</script> 读取文件 获得文件后,使用FileReader对象读取文件到内存.读取完成后,将触发onload事件,result属性用于访问文件的数据, FileReader包括四个异步读取文件的选项. 1.FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。 2.FileReader.readAsText(Blob|File, opt_encoding) - result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。 3.FileReader.readAsDataURL(Blob|File) - result 属性将包含编码为数据网址的 file/blob 数据。 4.FileReader.readAsArrayBuffer(Blob|File) - result 属性将包含 ArrayBuffer 对象形式的 file/blob 数 1.对您的 FileReader 对象调用其中某一种读取方法后,可使用 onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。 读取文件呈现缩略图(例子) 1.<style> 2. .thumb { 3. height: 75px; 4. border: 1px solid #000; 5. margin: 10px 5px 0 0; 6. } 7.</style> 8. 9.<input type="file" id="files" name="files[]" multiple /> 10.<output id="list"></output> 11. 12.<script> 13. function handleFileSelect(evt) { 14. var files = evt.target.files; // FileList object 15. 16. // Loop through the FileList and render image files as thumbnails. 17. for (var i = 0, f; f = files[i]; i++) { 18. 19. // Only process image files. 20. if (!f.type.match(\'image.*\')) { 21. continue; 22. } 23. 24. var reader = new FileReader(); 25. 26. // Closure to capture the file information. 27. reader.onload = (function(theFile) { 28. return function(e) { 29. // Render thumbnail. 30. var span = document.createElement(\'span\'); 31. span.innerHTML = [\'<img class="thumb" src="\', e.target.result, 32. \'" title="\', escape(theFile.name), \'"/>\'].join(\'\'); 33. document.getElementById(\'list\').insertBefore(span, null); 34. }; 35. })(f); 36. 37. // Read in the image file as a data URL. 38. reader.readAsDataURL(f); 39. } 40. } 41. 42. document.getElementById(\'files\').addEventListener(\'change\', handleFileSelect, false); 43.</script> 分割文件 1.if (file.webkitSlice) { //关键代码 2. var blob = file.webkitSlice(startingByte, endindByte); 3.} else if (file.mozSlice) { 4. var blob = file.mozSlice(startingByte, endindByte); 5.} 6.reader.readAsBinaryString(blob); 如何读取文件块(例子) 1.<style> 2. #byte_content { 3. margin: 5px 0; 4. max-height: 100px; 5. overflow-y: auto; 6. overflow-x: hidden; 7. } 8. #byte_range { margin-top: 5px; } 9.</style> 10. 11.<input type="file" id="files" name="file" /> Read bytes: 12.<span class="readBytesButtons"> 13. <button data-startbyte="0" data-endbyte="4">1-5</button> 14. <button data-startbyte="5" data-endbyte="14">6-15</button> 15. <button data-startbyte="6" data-endbyte="7">7-8</button> 16. <button>entire file</button> 17.</span> 18.<div id="byte_range"></div> 19.<div id="byte_content"></div> 20. 21.<script> 22. function readBlob(opt_startByte, opt_stopByte) { 23. 24. var files = document.getElementById(\'files\').files; 25. if (!files.length) { 26. alert(\'Please select a file!\'); 27. return; 28. } 29. 30. var file = files[0]; 31. var start = parseInt(opt_startByte) || 0; 32. var stop = parseInt(opt_stopByte) || file.size - 1; 33. 34. var reader = new FileReader(); 35. 36. // If we use onloadend, we need to check the readyState. 37. reader.onloadend = function(evt) { 38. if (evt.target.readyState == FileReader.DONE) { // DONE == 2 39. document.getElementById(\'byte_content\').textContent = evt.target.result; 40. document.getElementById(\'byte_range\').textContent = 41. [\'Read bytes: \', start + 1, \' - \', stop + 1, 42. \' of \', file.size, \' byte file\'].join(\'\'); 43. } 44. }; 45. 46. if (file.webkitSlice) { 47. var blob = file.webkitSlice(start, stop + 1); 48. } else if (file.mozSlice) { 49. var blob = file.mozSlice(start, stop + 1); 50. } 51. reader.readAsBinaryString(blob); 52. } 53. 54. document.querySelector(\'.readBytesButtons\').addEventListener(\'click\', function(evt) { 55. if (evt.target.tagName.toLowerCase() == \'button\') { 56. var startByte = evt.target.getAttribute(\'data-startbyte\'); 57. var endByte = evt.target.getAttribute(\'data-endbyte\'); 58. readBlob(startByte, endByte); 59. } 60. }, false); 61.</script> 监控读取进度 1.onloadstart 和 onprogress 事件可用于监控读取进度 通过显示进度条来监控读取状态(例子) 1.<style> 2. #progress_bar { 3. margin: 10px 0; 4. padding: 3px; 5. border: 1px solid #000; 6. font-size: 14px; 7. clear: both; 8. opacity: 0; 9. -moz-transition: opacity 1s linear; 10. -o-transition: opacity 1s linear; 11. -webkit-transition: opacity 1s linear; 12. } 13. #progress_bar.loading { 14. opacity: 1.0; 15. } 16. #progress_bar .percent { 17. background-color: #99ccff; 18. height: auto; 19. width: 0; 20. } 21.</style> 22. 23.<input type="file" id="files" name="file" /> 24.<button onclick="abortRead();">Cancel read</button> 25.<div id="progress_bar"><div class="percent">0%</div></div> 26. 27.<script> 28. var reader; 29. var progress = document.querySelector(\'.percent\'); 30. 31. function abortRead() { 32. reader.abort(); 33. } 34. 35. function errorHandler(evt) { 36. switch(evt.target.error.code) { 37. case evt.target.error.NOT_FOUND_ERR: 38. alert(\'File Not Found!\'); 39. break; 40. case evt.target.error.NOT_READABLE_ERR: 41. alert(\'File is not readable\'); 42. break; 43. case evt.target.error.ABORT_ERR: 44. break; // noop 45. default: 46. alert(\'An error occurred reading this file.\'); 47. }; 48. } 49. 50. function updateProgress(evt) { 51. // evt is an ProgressEvent. 52. if (evt.lengthComputable) { 53. var percentLoaded = Math.round((evt.loaded / evt.total) * 100); 54. // Increase the progress bar length. 55. if (percentLoaded < 100) { 56. progress.style.width = percentLoaded + \'%\'; 57. progress.textContent = percentLoaded + \'%\'; 58. } 59. } 60. } 61. 62. function handleFileSelect(evt) { 63. // Reset progress indicator on new file selection. 64. progress.style.width = \'0%\'; 65. progress.textContent = \'0%\'; 66. 67. reader = new FileReader(); 68. reader.onerror = errorHandler; 69. reader.onprogress = updateProgress; 70. reader.onabort = function(e) { 71. alert(\'File read cancelled\'); 72. }; 73. reader.onloadstart = function(e) { 74. document.getElementById(\'progress_bar\').className = \'loading\'; 75. }; 76. reader.onload = function(e) { 77. // Ensure that the progress bar displays 100% at the end. 78. progress.style.width = \'100%\'; 79. progress.textContent = \'100%\'; 80. setTimeout("document.getElementById(\'progress_bar\').className=\'\';", 2000); 81. } 82. 83. // Read in the image file as a binary string. 84. reader.readAsBinaryString(evt.target.files[0]); 85. } 86. 87. document.getElementById(\'files\').addEventListener(\'change\', handleFileSelect, false); 88.</script> 出处1.https://www.html5rocks.com/zh/tutorials/file/dndfiles/ 出处2.https://vimsky.com/article/3575.html
-- https://www.cnblogs.com/streamwang/p/8056301.html
function handleFileSelect(evt) { var files = evt.target.files; // FileList object var reader = new FileReader();//这是核心,读取操作就是由它完成. reader.readAsText(new Blob(files));//读取文件的内容,也可以读取文件的URL reader.onload = function () { //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可 console.log(this.result); } //usage: readTextFile("/Users/Documents/workspace/test.json", function(text){ var data = JSON.parse(text); console.log(data); });