Главная

Передача файла по ajax на чистом JavaScript

HTML и JavaScript код примера приведённого ниже

<form action="" method="POST">
<p>Простое текстовое поле: <input type="text" id="testfield" name="testfield" value="Тестовый ввод"></p>
<p>Выберите файл для отправки: <input type="file" id="testfile" name="testfile" accept="image/*"></p>
<p><input type="submit" value="Отправить" onclick="sendForm();return false;"></p>
</form>
<h3>Результат полученный от сервера после отправки формы</h3>
<p><TEXTAREA id="ajaxresult" style="width:100%;" rows="4"></TEXTAREA></p>
<script language="JavaScript">
function createRequestObject() {
  try {return new XMLHttpRequest();}
  catch(e) {
    try {return new ActiveXObject('Msxml2.XMLHTTP');}
    catch(e) {
      try {return new ActiveXObject('Microsoft.XMLHTTP');}
      catch(e) {return null;}
    }
  }
}

function sendPost(link,data,response) {
  var http = createRequestObject();
  if (http) {
    http.open('POST',link,true);
//    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    http.setRequestHeader("Accept","application/json");
    http.onreadystatechange = function () {
      if (http.readyState == 4) {
        if (typeof response == 'function') {
          response(http.responseText);
        }
      }
    }
    http.send(data);
  } else {
    // Не удалось создать Ajax объект
  }
  return true;
}

function sendForm() {
  data = new FormData();
  var testfield = document.getElementById('testfield').value;
  data.append('testfield',testfield);
  var testfile = document.getElementById('testfile').files[0];
  data.append('testfile',testfile);
  sendPost('https://blog.ivru.net/ajax/id229.php',data,function(response) {
    var ajaxresult = document.getElementById('ajaxresult');
    var obj = JSON.parse(response);
    var textToResult = '';
    if (obj) {
      if (typeof obj.testField == 'string') {
        textToResult = 'Значение текстового поля: ' + obj.testField + '.\n';
      } else if (typeof obj.testField == 'undefined') {
        textToResult = 'Текстовое поле не возвращено в JSON строке' + '.\n';
      } else if ((typeof obj.testField == 'boolean') && (obj.testField == false)) {
        textToResult = 'Текстовое поле не передано или пустое' + '.\n';
      }
      if (typeof obj.file == 'string') {
        textToResult += 'Вы передали файл с именем: "' + obj.file + '"';
        if (typeof obj.fileSize == 'number') {
          textToResult += ' размер переданного файла ' + obj.fileSize + ' байт';
        }
      } else if (typeof obj.file == 'undefined') {
        textToResult += "Информация о файле отсутствует в JSON строке";
      } else if ((typeof obj.file == 'boolean') && (obj.file == false)) {
        textToResult += "Файл не был передан";
      }
    } else {
      textToResult = 'Не была получена корректная JSON строка';
    }
    textToResult += '.';
    ajaxresult.value = textToResult;
  });
//  return true;
}
</script>

Пример формы отправляющей файл по Ajax

Результат полученный от сервера после отправки формы

Вы так же можете прочитать следующие статьи: