1

我正在使用 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)
                    }
                });
            };

任何建议都应该不胜感激。

4

2 回答 2

1

这不起作用有几个原因：

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

如果您想使用文件输入访问用户选择的文件，请使用Files API（但请注意有限的浏览器支持）。

于 2013-09-19T06:44:42.870 回答
0

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

使用 File API 的示例：（小提琴）

// 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/

于 2013-09-19T06:58:23.773 回答