CỘNG ĐỒNG CÔNG NGHỆ THÔNG TIN VIỆT NAM
CHÀO MỪNG CÁC BẠN ĐẾN VỚI CỘNG ĐỒNG CÔNG NGHỆ THÔNG TIN VIỆT NAM

Chia sẻ script code upload ảnh sử dụng ajax với PHP

0 Thành viên và 1 Khách đang xem chủ đề.

Ngủ rồi CCNACCNP

  • Hero Member
  • *****
    • Bài viết: 3980
    • Số Lần: +73/-0
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.

Demo ứng dụng chúng ta sẽ xây dụng được trong bài này sẽ như 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:

Mã nguồn: [Chọn]
index.html // phần giao diện
upload.php // xử lý upload
uploads // thư mục upload

Giao diện

-Đầu tiên chúng ta sẽ sử dụng HTML và bootstrap để xây dụng giao diện cho ứng dụng.

Mã nguồn: [Chọn]
<!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>
Xử lý ajax

Tiếp đó chúng ta sẽ sử lý ajax như sau:

Mã nguồn: [Chọn]
<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:

Mã nguồn: [Chọn]
<?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
}

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.

Chúc các bạn thành công.
« Sửa lần cuối: Tháng Sáu 21, 2019, 03:19:31 PM gửi bởi NetworkEngineer »


 

Related Topics

  Tiêu đề / Tác giả Trả lời Bài mới
1 Trả lời
1631 Lượt xem
Bài mới Tháng Bảy 10, 2012, 09:51:11 AM
gửi bởi CCNACCNP
0 Trả lời
452 Lượt xem
Bài mới Tháng Sáu 30, 2015, 01:14:05 PM
gửi bởi WebHosting
0 Trả lời
128 Lượt xem
Bài mới Tháng Mười Một 27, 2018, 12:43:18 PM
gửi bởi CCNACCNP
0 Trả lời
166 Lượt xem
Bài mới Tháng Mười Một 27, 2018, 12:52:21 PM
gửi bởi CCNACCNP
1 Trả lời
2701 Lượt xem
Bài mới Tháng Chín 23, 2019, 12:31:58 PM
gửi bởi NetworkEngineer