Upload nhiều hình ảnh sử dụng jQuery, Ajax và PHP

    Rating: ★★★★☆
    View: 307
    Download: 255

     

     

    Mã ví dụ giúp bạn tải lên nhiều hình ảnh cùng một lúc mà không cần làm mới trang bằng jQuery, Ajax và PHP. Đoạn code này đơn giản hóa việc tải lên nhiều hình ảnh mà không cần làm mới trang. 

    Có hai cách để hiển thị xem trước hình ảnh được tải lên. Bạn có thể hiển thị các hình ảnh được tải lên có hoặc không được lưu trữ trong một thư mục của máy chủ.

    1. Javascript Code:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>

    Các cấu hình tùy chọn ajax

    <script>
    $(document).ready(function(){
        $('#uploadForm').ajaxForm({
            target:'#imagesPreview',
            beforeSubmit:function(){
                $('#uploadStatus').html('<img src="uploading.gif"/>');
            },
            success:function(){
                $('#images').val('');
                $('#uploadStatus').html('');
            },
            error:function(){
                $('#uploadStatus').html('Images upload failed, please try again.');
            }
        });
    });
    </script>

    2. HTML Code:

    Tạo biểu mẫu HTML với trường nhập để cho phép người dùng chọn nhiều hình ảnh họ muốn tải lên.

    - Thẻ < form > phải chứa các thuộc tính này - method="post"và enctype="multipart/form-data"

    - Thẻ < input > phải chứa type="file"và nhiều thuộc tính.

    <!-- images upload form -->
    <form method="post" id="uploadForm" enctype="multipart/form-data" action="upload.php">
        <label>Choose Images</label>
        <input type="file" name="images[]" id="images" multiple >
        <input type="submit" name="submit" value="UPLOAD"/>
    </form>
    
    <!-- display upload status -->
    <div id="uploadStatus"></div>
    
    <!-- gallery view of uploaded images --> 
    <div class="gallery" id="imagesPreview"></div>

    3. File PHP

    <?php
    if(isset($_POST['submit'])){
        // File upload configuration
        $targetDir = "uploads/";
        $allowTypes = array('jpg','png','jpeg','gif');
        
        $images_arr = array();
        foreach($_FILES['images']['name'] as $key=>$val){
            $image_name = $_FILES['images']['name'][$key];
            $tmp_name   = $_FILES['images']['tmp_name'][$key];
            $size       = $_FILES['images']['size'][$key];
            $type       = $_FILES['images']['type'][$key];
            $error      = $_FILES['images']['error'][$key];
            
            // File upload path
            $fileName = basename($_FILES['images']['name'][$key]);
            $targetFilePath = $targetDir . $fileName;
            
            // Check whether file type is valid
            $fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
            if(in_array($fileType, $allowTypes)){    
                // Store images on the server
                if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){
                    $images_arr[] = $targetFilePath;
                }
            }
        }
        
        // Generate gallery view of the images
        if(!empty($images_arr)){ ?>
            <ul>
            <?php foreach($images_arr as $image_src){ ?>
                <li><img src="<?php echo $image_src; ?>" alt=""></li>
            <?php } ?>
            </ul>
    <?php }
    }
    ?>

    Trong trường hợp bạn muốn upload image và mã hóa hình ảnh thì sử dụng đoạn code sau:

    <?php
        $images_arr = array();
        foreach($_FILES['images']['name'] as $key=>$val){
            //display images without stored
            $extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
            $images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
        }
    ?>

     

    loading Đang tải...

    api được ưa chuộng