Ошибка загрузки файла php ajax

Question

Я хочу загрузить файл с помощью ajax, но я не получаю данные в php $_FILES, и я получаю его в $_REQUEST. Как мне это сделать. Ниже мой jquery code.Ajax не работает для загрузки файлов, поэтому есть какой-либо код, чтобы я мог объединиться с существующим кодом для процесса загрузки файлов.

<script> 
jQuery(function($){ 
    jQuery('#btn').click(function(){ 

     var data = {}, 
      ticks = []; 

     $('.ajax_elements').each(function(_, elem) { 
      data[this.id] = this.value; 

     }); 


     $.ajax({ 
      type : 'POST', 
      url : 'app_process.php', 
      data : data, 
      cache : false 
     }).done(function(result) { 
      alert(result); 
     }); 
    }); 
}); 
</script> 
<form name="frm" enctype="multipart/form-data"> 
    <input type="text" name="bb" class="ajax_elements" id="one"/> 
    <input type="file" class="ajax_elements" name="passport" id="passport" /> 
    <input type="button" name="bttn" id="btn" /> 
    </form> 

здесь код PHP файл

<?php 
    if($_REQUEST['passport']!=''): 
     $uploaddir = 'images/'; 
     move_uploaded_file($_FILES["file"]["tmp_name"], $uploaddir . str_replace(" ","_",$_REQUEST['passport'])); 
    endif; 
?> 

сообщение об ошибке

Примечание: Undefined индекс: файл в G: \ XAMPP \ HTDOCS \ data_ajax \ app_process.php on line

Answer 1

Существует 2 проблемы:

Вам нужно добавить атрибут enctype="multipart/form-data" в виде тега, если вы хотите загрузить файлы:

заменить

<form name="frm"> 

по

<form name="frm" enctype="multipart/form-data" > 

С помощью ajax (и jquery) вы не можете отправить файл напрямую. Но я предлагаю вам, что jquery form plugin, который может помочь вам в этом

Answer 2

Мой совет будет смотреть на XMLHttpRequest, FormData и File API. Mozilla Developer Network имеют отличную документацию по всем этим.

Это требует тестирования и настройки, чтобы быть более надежными в среде разработки, но что-то вдоль линий это может заставить вас начать ...

<script> 
$('#btn').click(function() { 

    var xhr = new XMLHttpRequest(); 

    xhr.upload.addEventListener("load", function(e){ 
     // stuff to do when upload is complete 
    }, false); 

    xhr.upload.addEventListener("progress", function(e){ 
     // stuff here to handle progress bars, progress percentages etc. 
    }, false); 

    xhr.open('POST', 'app_process.php', true); 

    var formdata = new FormData(); 
    var file = $('#passport').get(0).files[0]; 

    formdata.append('passport', file); 

    xhr.send(formdata); 

}); 
</script> 

И PHP ...

<?php 
if (isset($_FILES['passport'])) { 
    $uploaddir = 'images/'; 
    $upload = move_uploaded_file($_FILES['passport']['tmp_name'], $uploaddir . str_replace(" ","_",$_FILES['passport']['name'])) or exit('Upload failed.'); 
} else { 
    exit('File not found'); 
} 
?> 

Любая дополнительная информация, которую вы хотите отправить вместе с файлом, должна быть добавлена ​​к объекту FormData. Они появятся в переменной PHP $_POST.

formdata.append('field', 'data'); 

Имейте в виду, что эти интерфейсы не поддерживается всеми браузерами, поэтому лучше практика включает в себя все обычные скрипты обнаружения функции, прежде чем пользователь достигнет этой точки.

Вы также можете связать функцию загрузки в случае изменения входного файла, а не просить нажатием кнопки ...

$('#passport').change(function() { ... 

Надежда, что помогает.