@kos_dev

Как сохранить файл из инпута на сервер?

Здравствуйте. Имеется один инпут:

<input type='file' id='file_id'>

Как мне с помощью Ajax сохранить его на сервер?
Как пытался я:

$(document).ready(function() {
  $('#file').change(function() {
    var file = this.files;

    $.ajax ({
      url: 'ajax/save-photo.php',
      type: 'POST',
      contentType: false,
      processData: false,
      data: file,
      success: function() {
        alert('success');
      },
      error: function(){
        alert('error');
      }
    });
  });
});
  • Вопрос задан
  • 3154 просмотра
Решения вопроса 1
amux
@amux
alp.ac
$('#upload').on('click', function() {
  var file_data = $('#file_id').prop('files')[0];  //Берем  Файл
  var form_data = new FormData();                  
  form_data.append('file', file_data);
  alert(form_data);  //Выводим инфо по файлам которые будут отправлены на сервер              
  $.ajax({
    url: 'ajax/save-photo.php', 
    dataType: 'text', 
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(php_script_response){
      alert(php_script_response); //  Выводим ответ от сервера
    }
  });
});


И в php (Если нужно):
if ( 0 < $_FILES['file']['error'] ) {
  echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
  move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@D3lphi
Создаете форму, внутрь всатвляете инпут:
<form id="my-form" enctype="multipart/form-data">
    <input type='file' id='file_id'>
</form>


Пишите js код:
$.ajax({
    url: "ajax/save-photo.php",
    method: 'POST',
    data: new FormData($('#my-form')[0]), // Вот таким образом создаем экземпляр FormData
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function() {
        alert('success');
    },
      error: function(){
        alert('error');
     }
});


Готово.
Ответ написан
Комментировать
XXXXPro
@XXXXPro
Fullstack Web developer
Через AJAX такое не получится. Придется делать однопиксельный iframe и ставить его в качестве target для формы.
Или воспользоваться готовым plugin, например, jQuery File Uploader.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы