Загружаемая ссылка для HTTP POST с использованием JavaScript

У меня есть конечная точка HTTP POST REST, которая потребляет изображение и возвращает документ HTML с пиксельными данными из изображения. Ответ HTTP включает заголовок Content-Disposition: attachment; filename = Pixels.html, чтобы браузер запрашивал загрузку.Загружаемая ссылка для HTTP POST с использованием JavaScript

Я хотел бы иметь HTML/JavaScript (не JQuery) приложение, которое

позволяет мне просматривать и выбирать изображения (например, <input id="fid" name="fid" type="file" />
щелкать ссылку выкладываю данные изображения в .? конечной точки и позвольте мне загрузить содержимое HTML на диск (например, <p onclick="javascript: getPixels()">Get Pixels</p>)

Как идти об этом я попытался следующий код:

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]); 
     } 
    } 
    }

Ниже приведен фрагмент HTML, который вызывает указанную выше функцию.

<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: Использование 3-сторонних приложений, таких как Downloadify: https://github.com/dcneiner/Downloadify

4: Существует еще один способ использования Blob, что я еще не пробовал, здесь: Browser/HTML Force download of image from src="data:image/jpeg;base64...". Это сообщение об изображении base64, но я думаю, что стоит попробовать с файлом html.

источник

2017-01-19 10:44:00

спасибо. Я попытался создать URL-адрес через Blob, но это не сработало: содержимое 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

Загружаемая ссылка для HTTP POST с использованием JavaScript

ответ

Смежные вопросы