Herunterladbare Datenverbindung für HTTP POST mit JavaScript

Ich habe einen HTTP POST REST-Endpunkt, der ein Bild konsumiert und ein HTML-Dokument mit Pixeldaten aus dem Bild zurückgibt. Die HTTP-Antwort enthält die Kopfzeile Content-Disposition: Anhang; Dateiname = Pixels.html, so dass der Browser zum Herunterladen aufgefordert werden würde.Herunterladbare Datenverbindung für HTTP POST mit JavaScript

Ich möchte ein HTML haben/JavaScript (nicht jQuery) Anwendung, die

mir ein Bild durchsuchen können und holen (zB <input id="fid" name="fid" type="file" />
auf Klicken auf einen Link um die Bilddaten auf die Post .? Endpunkt und lassen Sie mich auf die Festplatte den HTML-Inhalt herunterladen (zB <p onclick="javascript: getPixels()">Get Pixels</p>)

Wie gehe ich über das tun dies habe ich versucht, den folgenden Code:

function getPixels() { 
    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 = "./GetPixelsService.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_display = document.getElementById("results"); 
       //  res_display.srcdoc = xhr.responseText; 
       // } 
       //} 
       xhr.send(imgData); 
      }; 
      reader.readAsArrayBuffer(input.files[0]); 
     } 
    } 
    }

Der folgende HTML-Klappentext ruft die obige Funktion auf.

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

Ich bin in der Lage, die Antwort zu holen und es in einem iframe angezeigt werden, aber nicht in der Lage, den Browser zu erhalten, den Inhalt herunterzuladen.

Schätzen Sie Ihre Hilfe. Ich habe mir die relevanten Fragen zu StackOverflow angeschaut, aber bisher hat keiner geholfen.

Vielen Dank im Voraus.

Quelle

2017-01-19 pengu1n

Sie können den Client-Browser nicht zwingen, einen Speicherdialog mit einer XMLHttpRequest-Abfrage aufzurufen.

Was können Sie tun, sind folgende:

1: prüfen diese Antwort von mir zu einer anderen Frage wie folgt aus: How to get pdf file via javascript ajax

2: die Datei auf dem Server generieren oder einen get Typ erstellen Anfrage-Handler und geben Sie den Link mit download Attribut. http://www.w3schools.com/TAgs/att_a_download.asp

3: Verwenden 3rd-Party-Anwendungen wie Downloadify: https://github.com/dcneiner/Downloadify

4: Es gibt eine andere Art und Weise Blob verwenden, die ich noch nicht versucht haben, hier in: Browser/HTML Force download of image from src="data:image/jpeg;base64...". In diesem Beitrag geht es um ein base64-Image, aber ich denke, es lohnt sich, es mit einer html-Datei zu versuchen.

Quelle

2017-01-19 10:44:00

Vielen Dank. Ich habe versucht, eine URL über Blob zu erstellen, aber das hat nicht funktioniert: Der Inhalt der URL wurde stattdessen auf die Seite verschoben. Ich werde noch einen Blick darauf werfen. – pengu1n

Die serverseitige ist REST, also erwartet sie nur die Image-Binärdatei. Aus diesem Grund habe ich den Formular-Ansatz nicht durchlaufen (der das Bild-Binary kodieren würde). Gibt es eine Möglichkeit, nur die Bilddatei per Formular zu senden? – pengu1n

Danke. Eine Kombination von (2) und (4) macht die Magie. Ich werde die ganze Lösung als eine Antwort zum Nutzen anderer posten. Danke noch einmal ... – pengu1n

Dank er-han erreicht der folgende Code das Ziel.

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

Quelle

2017-01-19 20:50:37 pengu1n

Ich hatte keine Zeit, daran zu arbeiten, sorry, aber ich bin froh, dass du es getan hast. Ich bin sicher, dass ich diese richtige Antwort in der Zukunft brauchen werde :) –

Schätze deine Hilfe. Ohne das wäre ich nicht in der Lage gewesen. Danke noch einmal! :-) – pengu1n

Herunterladbare Datenverbindung für HTTP POST mit JavaScript

Antwort

Verwandte Themen