Я сделал много поисков о том, как загрузить файлы из формы с помощью Ajax и выяснил, что xhr2 должен это сделать. Тем не менее, я попытался использовать объекты FormData, и он не работает.
Вот простая форма html
<!DOCTYPE html> <html> <head> <title>File Upload</title> </head> <body> <form id="form" method="post" action="post.php" enctype="multipart/form-data"> <input type="file" name="img"/> <input type="submit" value="Upload" /> </form> <script src="jquery.js"></script> <script src="upload.js"></script> </body> </html> И вот файл post.php, который отлично работает, когда называется «старомодным» способом:
<?php if($_FILES['img']['error'] > 0) die('Error ' . $_FILES['file']['error']); if(empty($_FILES['img']['name'])) die('No file sent.'); $tmp = $_FILES['img']['tmp_name']; if(is_uploaded_file($tmp)) { if(!move_uploaded_file($tmp, 'img.png')) echo 'error !'; } else echo 'Upload failed !'; ?>
И вот 'upload.js'
$(function() { $('#form').submit(function(e) { e.preventDefault(); data = new FormData($('#form')); console.log('Submitting'); $.ajax({ type: 'POST', url: 'post.php', data: data, cache: false, contentType: false, processData: false }).done(function(data) { console.log(data); }).fail(function(jqXHR,status, errorThrown) { console.log(errorThrown); console.log(jqXHR.responseText); console.log(jqXHR.status); }); }); });
У вас есть идея, почему он не работает? Консоль возвращает «Нет отправленного файла».
Большое спасибо !
Попробуйте заменить код:
data = new FormData($('#form'));
с этим:
data = new FormData($('#form')[0]);
для получения первого элемента DOM из массива jQuery.