Question

我正在使用ajax调用将数据加载到我的应用程序。它适用于像这样的路径

../../DataSource/newJson.json

但它不适用于这样的路径。

C:\Users\acer\Desktop\NewJson.json

我搜索了很多，但我没有找到任何适当的解决方案。我正在使用以下代码从本地目录加载文件。

 <button id="loadData">update new Json</button>
 <input type="file" id="newJson" value="file" />

这是我的ajax电话：

$("#loadData")[0].onclick= function (e){ 
                $.holdReady(true);
                var request = $.ajax({
                    type: "GET",
                    dataType: 'json',
                    url: $("#newJson").val(),
                    success: function (data) {
                     alert('success')
                    },
                    error: function (data, dat1, error) {
                     alert(error)
                    }
                });
            };

任何建议都应该受到赞赏。

Answer 1

这有几个原因不起作用：

不允许XMLHttpRequest访问任意第三方网址（并且由于网址位于访问者的硬盘而不是您的网站，因此它是第三方网址。）
文件输入的完整路径通常被浏览器隐藏（因为访问者硬盘的目录结构不属于网站的业务）
file:// URI不使用与本地目录路径完全相同的语法

如果您想使用文件输入访问用户选择的文件，请使用the Files API（但请注意limited browser support）。

Answer 2

您需要支持哪些浏览器？对于现代浏览器，您可以使用HTML5 File API。对于不支持它的浏览器，一个选项是到服务器的往返（上传文件并返回其内容），或者像https://github.com/Jahdrien/FileReader这样的polyfill

使用文件API的示例：（ fiddle ）

// check for support
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // event handler to fire when file input changes
  function handleFileSelect(evt) {
    var file = evt.target.files[0],
        reader = new FileReader(),
        contents;
      if( file ){
         reader.onload = function(f){
            contents = f.target.result;
            console.log( contents ); // here you'd use JSON.parse on the contents
         };
         reader.readAsText(file);
      }
  }
  // attach the event listener. It'll fire immediately, without clicking on the other button.
  document.getElementById('newJson').addEventListener('change', handleFileSelect, false);
} else {
 console.log( 'File API not supported, sorry' )   
}

了解详情：http://www.html5rocks.com/en/tutorials/file/dndfiles/

从本地目录加载文件？

2 个答案: