web-dev-qa-db-ja.com

ローカルファイルのxmlhttprequest

サーバーの残りのWebサービスに送信するファイルへのパスがあります。 xmlhttprequestオブジェクトを使用しています。投稿は次のとおりです。

var url = "http://localhost:8080/RestWSGS/jersey/gridsense";
 var boundary = "--------------" + (new Date).getTime();
  xmlHttp.open('POST', url, true);
  xmlHttp.onreadystatechange = function ()
  {
      if (this.readyState != 4)
        return;

      var result =this.responseText;
    document.write(result);
    };
  xmlHttp.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

var  part ="";
 part += 'Content-Disposition: form-data; ';
  part += 'name="' + document.getElementById("filename").name + '" ; ';
  //alert(document.getElementById("filename").value);
  part += 'filename="'+ document.getElementById("filename").value +  '";\r\n';

  part += "Content-Type: application/xml";
  part += "\r\n\r\n"; // marks end of the headers part
  part += 'filename="'+ document.getElementById("filename").value +  '";\r\n';
  part+= data;
   var request = "--" + boundary + "\r\n";
  request+= part /* + "--" + boundary + "\r\n" */;
  request+= "--" + boundary + "--" + "\r\n";
  alert(request); 
  xmlHttp.send(request);

送信したいデータは、クライアントのローカルディスクにあります。 getメソッドを使用したい：

var str = document.getElementById("filename").value;


    var data;
    var xmlhttp1 = getNewHTTPObject();
    xmlhttp1.open("GET", 
    "file:///New Folder/" +document.getElementById("filename").value , false);

    xmlhttp1.send(null);
    alert('hi' + xmlhttp1.status);
    xmlhttp1.onreadystatechange = function()    {
        if (this.status == 0)
        {
            alert("resp " + this.responseText);
            data = this.responseText;
        }
    }

File：//は機能しません。クライアントディレクトリにファイルを配置し、file：///を削除すると、少なくともxmlhttprequestが開いていることを確認し、ステータス200を表示できます（大丈夫だと思います!!）。私はreadystatus == 4の代わりにローカルファイルチェックステータス== 0のためにそれを読んだので、私はそれをしましたが、それは未定義としてデータ変数を与えるため、ファイルはサーバーに行きません。最初は、残りのURLとしてフォームアクションを指定したとき、正常にアップロードされていました。私はhtml5を使用していないため、input type = file要素からFileオブジェクトを取得できません。これには、フォーム要素の代わりにxmlhttprequestオブジェクトを直接使用します。どんな提案やヒントKAvitaでこの問題で私を助けてください

フォーム送信を使用してアップロードを行う場合でも、Webサービスの戻り値をどのように使用できますか？それが、xmlhttpRequestを使用する必要がある理由です。誰もがアクションからの戻り値がどのように使用されるかを提案できる場合、それは素晴らしいでしょう！カビタ

xmlhttprequest
25
kavita

歴史的に、JavaScriptからローカルファイルをクエリすることはできません（または許可されてはいけません、または奇妙なことです）。これは深刻なセキュリティ侵害になります。

これを行うことができる状況はごくわずかですが、一般に、制限を解除するか、この例外的な権限が付与されていることを現在のページの実行プロセスに通知するために、ブラウザーに設定する必要がある特定のセキュリティ設定が含まれます。これは、たとえばFirefoxでプロパティを編集することで実行できます。また、ブラウザの拡張機能を開発するとき（たとえばChromeまたはFF）がファイルアクセス許可を要求する場合は、通常は問題ありません。

この制限を回避する別の方法は、ローカルWebサーバーをホストし、その上で仮想ホストを宣言して、この種のAJAXローカルファイルを取得する要求を行うことができます。 Web開発者がこのトリックに頼って（実際に標準に似ている）ローカル開発の利点を得ると同時に生産システムを複製するために、たとえばJettyのような軽量のWebサーバーを使用できます。

（あなたが遭遇したと思われるもう一つの迷惑は、いくつかのブラウザ-少なくともいくつかの比較的古いバージョンの3.6.xなどのFFバージョン-が時々200のような正のエラーコードを返すことです内部セキュリティポリシーに従ってリクエストがブロックされます。しばらく混乱する可能性があります...）。

最後に、新しいHTML5 APIは、ローカルファイルにアクセスするためのいくつかの新しい構造を提供します。読書を検討する：

その他のSOの質問も追加のポインターを提供します。

22
haylem

Iframeを使用しています。

<div class="item" onclick="page(event)">HTML5</div>

<iframe id="page" src="">

function page(e) {
    trigger = e.currentTarget.innerHTML;
    docname = new String(trigger + ".txt");
    document.getElementById("page").src = docname;
}
4
Ricardo M