8
Tôi đã thực hiện nhiều tìm kiếm về cách tải tệp lên từ biểu mẫu bằng Ajax và phát hiện ra rằng xhr2 có thể thực hiện việc đó. Tuy nhiên, tôi đã cố gắng bản thân mình để sử dụng các đối tượng FormData và nó không hoạt động.Tải tệp lên bằng jQuery Ajax
Dưới đây là một hình thức html đơn giản
<!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>
Và đây là các tập tin 'post.php' mà chỉ hoạt động tốt khi được gọi là cách 'lỗi thời':
<?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 !';
?>
Và đây là '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);
});
});
});
Bạn có biết tại sao nó không hoạt động không? Giao diện điều khiển trả về 'Không có tệp được gửi'.
Cảm ơn rất nhiều!
Không thể tin rằng đó chỉ là điều này! Cảm ơn rất nhiều ! –