js 读取外部的本地json文件

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