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

Question

[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');
      }
    });
  });
});

Answer 1

[Igor Koch]

$('#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']);
}

Answer 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');
     }
});

Готово.

Answer 3

[4X_Pro]

Через AJAX такое не получится. Придется делать однопиксельный iframe и ставить его в качестве target для формы.
Или воспользоваться готовым plugin, например, jQuery File Uploader.