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 は Web サイトではなく訪問者のハードディスク上にあるため、サード パーティの URL です)。
  2. ファイル入力のフル パスは、多くの場合、ブラウザーによって隠されます (訪問者のハード ディスクのディレクトリ構造は Web サイトの仕事ではないため)。
  3. file://URI は、ローカル ディレクトリ パスとまったく同じ構文を使用しません。

ファイル入力を使用してユーザーが選択したファイルにアクセスする場合は、Files APIを使用します(ただし、ブラウザのサポートが限られていることに注意してください)。

于 2013-09-19T06:44:42.870 に答える
0

どのブラウザをサポートする必要がありますか? 最新のブラウザーでは、HTML5 File API を使用できます。それをサポートしていないブラウザーの場合、1 つのオプションは、サーバーへのラウンドトリップ (ファイルをアップロードしてそのコンテンツを返す)、またはhttps://github.com/Jahdrien/FileReaderのようなポリフィルです。

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

于 2013-09-19T06:58:23.773 に答える