Hướng dẫn upload hình ảnh qua Ajax bằng thư viện Jquery Form

  

Bạn đang tìm kiếm một cách để upload hình ảnh qua ajax jquery mà không cần tải lại trang như upload bằng php thông thường. Với thư viện jquery.form bạn chỉ cần vài đoạn code jquery bạn đã có thể thực hiện được điều đó thông qua bài hướng dẫn của Free Tut Hay vô cùng đơn giản và dễ hiểu.

 Tải về
Xem demo

Bạn có thể tải về để có thể chạy và chỉnh sửa mình đã comment chi tiết từng dòng. Nếu bạn vẫn chưa thể hình dung được thì bạn hãy đọc tiếp phần dưới này để hiểu thêm nhé ^^

Trong script này có 2 phần chính 1 là client ở file index.php chứa javascript và htnl css ... 2 là server để xử lý khi request được gửi đến ở file doajax.php

Code javascript bạn có thể đọc code với các comment chi tiết

 <script type="text/javascript" >

        $(document).ready(function () { // Khi nào trang được load thì chạy

            $('#photoimg').live('change', function () { // Khi nào chọn file thì chạy

                $("#preview").html(''); // Xóa hết những cái cũ trong <div id="preview"></div>

                $("#preview").prepend('<img id="loading" src="loader.gif" alt="Uploading...."/>'); // Show loading

                $("#imageform").ajaxForm({

                    success: showResponse // Xử lý trả về từ server bằng funtion showResponse

                }).submit(); // Submit Form



            });

        });

        function showResponse(response) { // Xử lý kết quả trả về với biến response là kết quả trả về từ server

            console.log(response); // Đưa vào console những thông tin trả về

            $('#loading').hide(); // Ẩn loading

            $("#preview").prepend(response); // Đổ vào preview kết quả trả về từ server

            $('#UploadFile').css('float', 'right'); // Float chọn file upload sang phải

        }

    </script>

doajax.php

Xử lý hình ảnh và upload lên server ở đây bạn có thể dùng sql để insert vào database

<?php
$path = "uploads/"; // Thư mục upload
$valid_formats = array("jpg", "png", "gif", "bmp","PNG",'JPG','GIF'); // Các đuôi file cho phép
$valid_type = array('image/gif','image/jpeg','image/png','image/bmp'); //Các định dạng cho phép
if (isset($_POST)) { // Kiểm tra tồn tại post request
    $name = $_FILES['photoimg']['name']; // Lấy tên
    $size = $_FILES['photoimg']['size']; // Lấy kích thước
    $type = $_FILES['photoimg']['type']; // Lấy kiểu file
    if (strlen($name)) { // Kiểm tra xem đã có file nào được chọn
        list($txt, $ext) = explode(".", $name); // Lấy đuôi file sau dấu . vào biến $ext
        if (in_array($ext, $valid_formats)) { // Kiểm tra đúng với các đuôi file cho phép
            if(in_array($type, $valid_type)){ // Kiển tra định dạng (Content-Type) của file cho phép
                if ($size < (1024 * 1024)) { // Kiểm tra dung lượng file. Nếu nhỏ hơn 1 Mb = 1024 * 1024 thì tiếp tục
                    $actual_image_name = time() . substr(str_replace(" ", "_", $txt), 5) . "." . $ext; // Đổi tên file upload
                    $tmp = $_FILES['photoimg']['tmp_name']; // Lấy thư mục lưu tạm upload file
                    if (move_uploaded_file($tmp, $path . $actual_image_name)) { // Di chuyển vào thư mục $path
                        echo "<img src='uploads/" . $actual_image_name . "'  class='preview'>"; // Nếu di chuyển thành công trả về html img để đẩy vào preview
                    } else
                        echo "Lỗi không xác đinh"; // Nếu di chuyển không thành công
                } else
                    echo "Tối đa upload 1 MB"; // Nếu file upload lớn hơn 1 MB
            } else
            echo "Không đúng định dạng"; // Nếu Content-Type không nằm trong danh sách cho phép
        } else
            echo "Không đúng định dạng"; // Nếu đuôi file không nằm trong danh sách cho phép
    } else
        echo "Hãy chọn một hình ảnh !"; // Nếu chưa có file gì được gửi đên
}

Browse More Articles

Tweet

Written by Unknown

Tôi là Quý, năm nay 18 tuổi với đam mê lập trình không giới hạn, tôi đã tự mình tìm hiểu mà không hề có thầy cô hoặc học ở bất cứ trường lớp trung tâm nào. Và tôi đã làm được những điều mà chính tôi cũng không thể tin được. Với hy vọng sẽ đem thêm nhiều tut hay đến cho mọi người nên đã lập ra blog này. Mong mọi người sẽ ủng hộ ^^!