JavaScriptを使用したHTTP POST用のダウンロード可能なデータ・リンク

イメージを消費し、イメージのピクセル・データを含むHTMLドキュメントを戻すHTTP POST RESTエンドポイントがあります。 HTTPレスポンスにはヘッダーが含まれますContent-Disposition：attachment; filename = Pixels.htmlブラウザがダウンロードを促すようにします。 JavaScriptを使用したHTTP POST用のダウンロード可能なデータ・リンク

は私が画像を閲覧し、選択することができます

私はHTMLを持ちたい/ JavaScriptを（ないjQueryの）アプリ（例えば、リンクがへの画像データをポストクリックで<input id="fid" name="fid" type="file" />
。？
0123：エンドポイントは、私は、ディスク（例えば、<p onclick="javascript: getPixels()">Get Pixels</p>）にHTMLコンテンツをダウンロードしてみましょう、私はこれをやって行くにはどうすればよい

私は、次のコードを試してみました

以下は、上記の関数を呼び出すHTMLのblurbです。

<p> 
    Upload the image here: 
    </p> 
    <input id="fid" name="fid" type="file" /> 
    <!--<button type="submit" onclick="javascript: getPixels()">Get Pixels</button>--> 
    <p onclick="javascript: getPixels()">Get Pixels</p> 
    <p /> 
    <hr /> 
    <p> 
    <img id="img2check" src="" alt="" /> 
    </p> 
    <p /> 
    <iframe id="results" style="width: 100%; border: 0; height: 400px;" src="javascript:;"> 
    Your browser does not support iframes. 
    </iframe>

レスポンスを選択してiframeに表示することはできますが、ブラウザからコンテンツをダウンロードすることはできません。

あなたのお手伝いをお待ちしております。私はStackOverflowに関する関連する質問を見てきましたが、これまでに何も助けてくれていません。

ありがとうございます。

出典

2017-01-19 pengu1n

XMLHttpRequestを使用してクライアントブラウザに保存ダイアログを表示させることはできません。あなたは何ができるか

は以下のとおりです。

1：チェックこれに似た別の質問に対する私のこの回答：How to get pdf file via javascript ajax

2：は、サーバー上のファイルを生成したりgetタイプを作成しますリクエストハンドラを呼び出し、download属性でリンクを張ってください。 http://www.w3schools.com/TAgs/att_a_download.asp

3：Downloadifyよう使用サードパーティのアプリ：https://github.com/dcneiner/Downloadify

4：Browser/HTML Force download of image from src="data:image/jpeg;base64..."：別の方法ここでは、私はまだ試していないBlobを、使用してがあります。この投稿はbase64画像に関するものですが、htmlファイルで試してみる価値はあると思います。

出典

2017-01-19 10:44:00

ありがとうございます。私はBlob経由でURLを作成しようとしましたが、うまくいかず、URLの内容がページにダンプされました。もう一度見てみましょう。 – pengu1n

サーバ側はRESTなので、画像のバイナリだけです。だからこそ、私はフォームアプローチ（イメージバイナリをエンコードする）をやっていないのです。フォームを介してイメージバイナリを送信する方法はありますか？ – pengu1n

ありがとうございます。（2）と（4）の組み合わせは魔法を行う。私は他の人の利益のための答えとして全体の解決策を掲示するでしょう。再度、感謝します ... – pengu1n

er-hanのおかげで、次のコードは目標を達成しました。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     function getPixels() { 
      showImage(); 
      var input = document.getElementById("fid"); 
      if (input.files && input.files[0]) { 
       if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var imgData = e.target.result; 
        var postUrl = "./SimpleService.svc/image"; 
        var xhr = new XMLHttpRequest(); 
        xhr.open("POST", postUrl); 
        xhr.setRequestHeader("Content-Type", "image/png"); 
        xhr.onreadystatechange = function() { 
         if (xhr.readyState === 4) { 
          var res_url = URL.createObjectURL(new Blob([xhr.responseText])); 
          var lnk = document.getElementById("dlink"); 
          lnk.href = res_url; 
          lnk.style.display = "block"; 
         } 
        } 
        xhr.send(imgData); 
       }; 
       reader.readAsArrayBuffer(input.files[0]); 
       } 
      } 
     } 

     function showImage() { 
      var input = document.getElementById("fid"); 
      if (input.files && input.files[0]) { 
       if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var img_display = document.getElementById("img2check"); 
        img_display.src = e.target.result; 
       }; 
       reader.readAsDataURL(input.files[0]); 
       } 
      } 
     } 
    </script> 

    <p> 
     Upload the image here: 
    </p> 
    <input id="fid" name="fid" type="file" /> 
    <p/> 
    <button type="submit" onclick="javascript: getPixels()">Upload</button> 
    <p /> 
    <hr /> 
    <p> 
     <img id="img2check" src="" alt="" /> 
    </p> 
    <p /> 
    <p> 
     <a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a> 
    </p> 
    </body> 
    </html>

出典

2017-01-19 20:50:37 pengu1n

私はそれに取り組む時間がなかった、申し訳ありませんが、私はあなたがそれをやってうれしいです。私は将来この適切な答えが必要になると確信しています:) –

あなたの助けを感謝します。それなしでそれをすることができなかったでしょう。再度、感謝します！ :-) – pengu1n

JavaScriptを使用したHTTP POST用のダウンロード可能なデータ・リンク

答えて

関連する問題