Có nhiều bạn thắc mắc ajax file upload hay ajax upload file vì vậy trong bài hôm nay mình sẽ hướng dẫn các bạn về upload ảnh sử dụng ajax với PHP đơn giản.
Trước khi đi vào bài viết các bạn cần có các kiến thức cơ bản sau:
Demo ứng dụng ta sẽ xây dụng được trong bài này sẽ như sau:
Cấu trúc thư mục của ứng dụng sẽ có dạng như sau:
index.html // phần giao diện
upload.php // xử lý upload
uploads // thư mục upload
Đầu tiên chúng ta sẽ sử dụng HTML và bootstrap để xây dụng giao diện cho ứng dụng.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Upload file vs Ajax</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="panel panel-success">
<div class="panel-body">
<form action="" method="POST" role="form">
<legend>Upload</legend>
<div class="form-group">
<label for="file">Chọn file</label>
<input id="file" type="file" name="sortpic" required=""/>
</div>
<div class="form-group">
<button id="upload" class="btn btn-primary">Upload</button>
</div>
</form>
<div class="status alert alert-success"></div>
</div>
</div>
</div>
</body>
</html>
Bây giờ chúng ta sẽ sử lý ajax như sau:
<script>
//xử lý khi có sự kiện click
$('#upload').on('click', function () {
//Lấy ra files
var file_data = $('#file').prop('files')[0];
//lấy ra kiểu file
var type = file_data.type;
//Xét kiểu file được upload
var match = ["image/gif", "image/png", "image/jpg",];
//kiểm tra kiểu file
if (type == match[0] || type == match[1] || type == match[2]) {
//khởi tạo đối tượng form data
var form_data = new FormData();
//thêm files vào trong form data
form_data.append('file', file_data);
//sử dụng ajax post
$.ajax({
url: 'upload.php', // gửi đến file upload.php
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (res) {
$('.status').text(res);
$('#file').val('');
}
});
} else {
$('.status').text('Chỉ được upload file ảnh');
$('#file').val('');
}
return false;
});
</script>
Ở upload.php chúng ta sẽ xử lý như sau:
<?php
if (isset($_POST) && !empty($_FILES['file'])) {
$duoi = explode('.', $_FILES['file']['name']); // tách chuỗi khi gặp dấu .
$duoi = $duoi[(count($duoi) - 1)]; //lấy ra đuôi file
// Kiểm tra xem có phải file ảnh không
if ($duoi === 'jpg' || $duoi === 'png' || $duoi === 'gif') {
// tiến hành upload
if (move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name'])) {
// Nếu thành công
die('Upload thành công file: ' . $_FILES['file']['name']); //in ra thông báo + tên file
} else { // nếu không thành công
die('Có lỗi!'); // in ra thông báo
}
} else { // nếu không phải file ảnh
die('Chỉ được upload ảnh'); // in ra thông báo
}
} else {
die('Lock'); // nếu không phải post method
}
Unpublished comment
Viết câu trả lời