Как использовать POST с XMLHttpRequest для отправки файла JPEG на сервер? - PullRequest
Новая
       42

Как использовать POST с XMLHttpRequest для отправки файла JPEG на сервер?

0 голосов
/ 10 сентября 2018

У меня есть тег IMG, такой как: 

<img src="test.jpeg" className="Test" alt="Test" height="42" width="42">

но мне пришлось отправить test.jpeg через xmlHttpRequest на веб-сайт, как бы это сделать используя XmlHttpRequest (). связанный вопрос здесь , но он использует GET, чтобы заполнить DOM. Проблема состоит в том, чтобы использовать POST с XMLHttpRequest для отправки файла «test.jpeg».

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018 
var formData = new FormData();

formData.append("inp", document.getElementById("inp").files[0]);

var request = new XMLHttpRequest();
request.open("POST", "http://yourdomain.com/submit.php");
request.send(formData);

Ваш HTML-код: 

<input id="inp" type='file'>
0 голосов
/ 10 сентября 2018

Вы можете отправить свое изображение в кодировке base64 

function readFile() {

  if (this.files && this.files[0]) {

    var FR= new FileReader();

    FR.addEventListener("load", function(e) {
      document.getElementById("b64").value     = e.target.result;
    }); 

    FR.readAsDataURL( this.files[0] );
  }

}

document.getElementById("inp").addEventListener("change", readFile);

кодовое изображение будет добавлено как значение в # b64 скрытый ввод 

<input id="inp" type='file'>
<input id="b64" type='hidden' name='b64'>

Кстати, вы можете вызвать readFile для отправки события, убедитесь, что правильно выбрали входной файл.

если ваш сервер PHP, используйте эту функцию для сохранения изображения: 

function save_image($base64_string, $image_location) {

    $ifp = fopen( $image_location, 'wb' ); 
    $data = explode( ',', $base64_string );
    fwrite( $ifp, base64_decode( $data[ 1 ] ) );
    fclose( $ifp ); 

    return $image_location; 
}

save_image($_POST['b64'], '/you/location');
...