8
私はAjaxを使ってフォームからファイルをアップロードする方法について多くの調査を行い、xhr2がそれを実行できるはずであることを発見しました。しかし、私はFormDataオブジェクトを使用しようとしましたが、動作しません。ここでjQueryを使ってファイルをアップロードするAjax
は、単純な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 !';
?>
そして、ここでは、「アップロードです.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);
});
});
});
なぜ機能していないのですか？コンソールは「No file sent」を返します。
ありがとうございます！ jQueryの配列から最初のDOM要素を取得するために
data = new FormData($('#form')[0]);
：これで
data = new FormData($('#form'));
：
これだけだとは信じられません！どうもありがとう ！ –