Php
Upload ảnh sử dụng ajax với PHP
Mấy hôm nay lang thang trên các group thấy mọi người hay vướng về upload ảnh sử dụng ajax với PHP, nên hôm nay mình sẽ demo cho các bạn một ứng dụng upload ảnh sử dụng ajax và PHP đơn giản. 1, Tổng q…
Mấy hôm nay lang thang trên các group thấy mọi người hay vướng về upload ảnh sử dụng ajax với PHP, nên hôm nay mình sẽ demo cho các bạn một ứng dụng upload ảnh sử dụng ajax và PHP đơn giản.
1, Tổng quan.
Nhìn chung nếu muốn hiểu được demo này thì các bạn cần phải có các kiến thức cơ bản sau:
2, Xây dựng.
Cấu Trúc
-Cấu trúc thư mục của ứng dụng sẽ có dạng như sau:
-Đầu tiên chúng ta sẽ sử dụng HTML và bootstrap để xây dụng giao diện cho ứng dụng.
Xem Giao Diện
Xử lý ajax
-Tiếp đó chúng ta sẽ sử lý ajax như sau:
Server nhận và xử lý upload
-Ở upload.php chúng ta sẽ xử lý như sau:
3, Lời Kết.
-Như vậy mình đã xây dựng xong úng dụng upload ảnh bằng ajax + php rồi. Vì đây là basic nên mình chỉ làm đơn giản như vậy thôi, còn trong thực tế có thể nó sẽ phức tạp hơn.
1, Tổng quan.
Nhìn chung nếu muốn hiểu được demo này thì các bạn cần phải có các kiến thức cơ bản sau:
- PHP : biết được upload file bằng PHP, xử lý chuỗi.
- Jquery: Biết ajax và thao tác với element cơ bản.
2, Xây dựng.
Cấu Trúc
-Cấu trúc thư mục của ứng dụng sẽ có dạng như sau:
index.html //phần giao diệnGiao 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="">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>
Xem Giao Diện
Xử lý ajax
-Tiếp đó 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>
Server nhận và xử lý upload
-Ở upload.php chúng ta sẽ xử lý như sau:
<?php
if(isset($_POST) && isset($_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 k thành công
die('Có lỗi!'); //in ra thông báo
}
} else{ //nếu k 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
}
3, Lời Kết.
-Như vậy mình đã xây dựng xong úng dụng upload ảnh bằng ajax + php rồi. Vì đây là basic nên mình chỉ làm đơn giản như vậy thôi, còn trong thực tế có thể nó sẽ phức tạp hơn.
Nguồn: Toidicode.com
Previous post
Upload ảnh sử dụng ajax với PHP
Related post
Hung.Pro.VN
Nhà thiết kế WebTôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...
mong lung quá
Trả lờiXóaUhm, cái này thế này là đơn giản rồi đấy. Nhưng mà để cho nó tốt và phong tránh các hacker tấn công thì phải bảo mật hơn nữa kìa. :) đơn giản như nó upload lên 1 file manager.php thì xem như nó quản lý luôn sever upload :D
Xóavâng ạ
Xóae có tham gia vào groups J2TEAM COMMUNITY ko đấy ;)
Xóa