Как загрузить файлы в форме через AJAX и PHP?
Вот то, что я пробовал до сих пор, и это не работает. HTML-файл содержит: —
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Generator | Upload Driver Specification Sheet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
function submit_form() {
var formData = new FormData($(this)[0]);
$.ajax({
url: 'last_file_action.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
$('#results').html(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
}
</script>
</head>
<body class="gray-bg3_full">
<form class="m-t" role="form" id='data' method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<div class="form-group">
<p id='new_project_text'>Please include your Product spec sheet: </p>
<input class="btn btn-primary-save btn-block" type="file" name="userfile" /> <i class="fa fa-upload"></i> <br/>
</div>
<button type= 'button' id="submit_driver" class="btn btn-warning block full-width m-b m-t" onclick='submit_form()'>Submit</button>
</form>
<div id='results'></div>
</body>
</html>Решение
var formData = new FormData();
formData.append("userfile", $(":file")[0].files[0]);
Другие решения
Вот как я это сделал.
var formData = new FormData ();
formData.append («userfile», $ («: file») [0] .files [0]);
Приведенный выше код верен, если у вас есть один файл и нет других полей ввода. В случае, если у вас есть больше поля ввода и несколько файлов загрузки в одной форме. Целевые элементы следует рассматривать по их идентификаторам, а не по типу $ («: file»).
Вот как мы можем получить другие файлы:
var formData = new FormData();
formData.append("first_file", $("#1st_file_id")[0].files[0]);
formData.append("2nd_file", $("#2nd_file_id")[0].files[0]);
formData.append("3rd_file", $("#3rd_file_id")[0].files[0]);Вот как мы можем получать данные из полей ввода формы, ориентируясь на их идентификаторы.
formData.append("input_field", $("#input_field_id").val());В PHP ничего не нужно менять. Если мы хотим получить значение поля ввода, мы можем сделать это:
$var = $_POST['input_field'];И если это файл, мы можем захватить его этим и выполнить остальную часть работы, как сделано в вопросе.
$_FILES['userfile'] or $_FILE['2nd_file']