VietNetwork.Vn

Tải lên và kéo tệp (dnd) HTML5 bằng canvas bằng cách sử dụng API kéo và thả, API tệp HTML5, mẫu jQuery và ví dụ CSS3 với hướng dẫn.

Nhìn vào trong

Trong tuần qua, tôi đã cố gắng tìm hiểu về Tải lên tệp HTML5 Kéo và thả (DnD) bằng cách sử dụng API kéo và thả kết hợp với API tệp HTML5 . API kéo và thả cho phép các trình duyệt nhận các tệp cục bộ từ màn hình của người dùng chỉ bằng cách ' kéo ' và sau đó ' thả '. Trong khi API tệp HTML5 cho phép JavaScript tương tác với các tệp cục bộ đã chọn trước khi tải lên máy chủ. Với cả hai, chúng ta có thể xây dựng giao diện tải lên tập tin kéo và thả.


Tôi đã tạo một ví dụ về kéo và thả tệp tải lên HTML5 với khả năng thay đổi kích thước, cắt hoặc định dạng lại / lọc hình ảnh được tải lên thông qua khung vẽ HTML5 trước khi gửi đến máy chủ. Các kỹ thuật bao gồm:

• API tệp HTML5 ( Trình ghi )
• API kéo và thả
• Mẫu jQuery
• và CSS3 cho mục đích tạo kiểu.

Bạn có thể kiểm tra bản demo làm việc thông qua liên kết trên đó. Hãy vui vẻ với tính năng kéo và thả tệp HTML5 này bằng canvas !

[loại trình duyệt = loại cfs-x '] Bản trình diễn hoạt động này chỉ hoạt động trong các trình duyệt hỗ trợ API tệp HTML5 cũng như API kéo và thả. [/ browser]

Đánh dấu HTML

Bản demo bao gồm hai phần chính, một khu vực để kéo và thả cũng như phần xem trước tải lên. Ý tưởng là chụp các tệp được người dùng tải lên cho dù thông qua khu vực kéo và thả hoặc nút duyệt, sau đó hiển thị nó trong phần xem trước trước khi tải lên máy chủ.

<!-- drop area -->
<div id="droparea">
    <div class="dropareainner">
        <p class="dropfiletext">Drop files here</p>
        <p>or</p>
        <p><input id="uploadbtn" type="button" value="Select Files"/></p>
        <!-- extra feature -->
        <p id="err"><!-- error message --></p>
    </div>
    <input id="upload" type="file" multiple />
</div>
<!-- result area -->
<div id="result"></div>
Ngoài ra, chúng tôi sẽ sử dụng Mẫu jQuery để tạo trình bao bọc xem trước hình ảnh có chứa bản xem trước của hình ảnh được tải lên, tên hình ảnh, kích thước hình ảnh gốc và kích thước cuối cùng của hình ảnh sẽ tải lên máy chủ.

<script id="imageTemplate" type="text/x-jquery-tmpl">
    <div class="imageholder">
        <figure>
            <img src="${filePath}" alt="${fileName}"/>
            <figcaption>
                ${fileName} <br/>
                <span>Original Size: ${fileOriSize} KB</span> <br/>
                <span>Upload Size: ${fileUploadSize} KB</span>
            </figcaption>
        </figure>
    </div>
</script>
Sự kiện ràng buộc

Bây giờ, hãy bắt tay với một số mã hóa jQuery. Điều đầu tiên mà chúng ta sẽ làm là liên kết các sự kiện Kéo và Thả với phần tử #droparea của chúng ta. Có một số sự kiện kéo , nhưng chúng tôi sẽ chỉ sử dụng các sự kiện kéo, kéo và drop .

var dropzone = $('#droparea');
 
dropzone.on('dragover', function() {
    //add hover class when drag over
    dropzone.addClass('hover');
    return false;
});
 
dropzone.on('dragleave', function() {
    //remove hover class when drag out
    dropzone.removeClass('hover');
    return false;
});
 
dropzone.on('drop', function(e) {
    //prevent browser from open the file when drop off
    e.stopPropagation();
    e.preventDefault();
    dropzone.removeClass('hover');
 
    //retrieve uploaded files data
    var files = e.originalEvent.dataTransfer.files;
    processFiles(files);
 
    return false;
});
dataTransfer.files sẽ trả về một FileList của các tệp được kéo.

Không chỉ kéo và thả khu vực, thay vào đó chúng tôi cũng sẽ tạo nút ' duyệt '. Nhưng chúng tôi không muốn sử dụng nút tải lên tệp trình duyệt riêng, vì vậy đây là một mẹo nhỏ cho việc này.

var uploadBtn = $('#uploadbtn');
var defaultUploadBtn = $('#upload');
 
uploadBtn.on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    //trigger default file upload button
    defaultUploadBtn.click();
});
 
defaultUploadBtn.on('change', function() {
    //retrieve selected uploaded files data
    var files = $(this)[0].files;
    processFiles(files);   
    return false;
});
Cách thực hành tốt nhất để sử dụng các đối tượng HTML5 mới là kiểm tra tính khả dụng của đối tượng trước khi sử dụng nó, chỉ cần bỏ qua chức năng hoặc hiển thị kế hoạch dự phòng nếu có.

function processFiles(files) {
    //check for browser support
    if(files && typeof FileReader !== "undefined") {
        //extract FileList as File object
        for(var i=0; i<files.length; i++) {
            readFile(files[i]);
        }
    }
    else {
        //some message or fallback
    }
}
Mỗi đối tượng File chứa các thuộc tính như name , size và type .

Đối tượng FileReader

Tiếp theo, chúng tôi sẽ đọc nội dung của tệp được tải lên thông qua đối tượng FileReader cho phép trình duyệt đọc không đồng bộ các tệp từ máy tính để bàn của người dùng.

var readFile = function(file) {
    if( (/image/i).test(file.type) ) {
        //define FileReader object
        var reader = new FileReader();
            
        //init reader onload event handlers
        reader.onload = function(e) {  
            var image = $('<img/>')
            .load(function() {
                //get new image URL from canvas image
                var newimageurl = getCanvasImage(this);
                
                //create preview using jQuery Template
                createPreview(file, newimageurl);
                
                //upload the new image to server
                uploadToServer(newimage, imageObj);
                
            })
            .attr('src', e.target.result); 
        };
            
        //begin reader read operation
        reader.readAsDataURL(file);
    } else {
        //some message for wrong file format
    }
}
Khi trình đọc được tải, chúng ta có thể liên kết hình ảnh được tải lên (được mã hóa theo Base64) vào <img> thông qua e.target.result . Sau đó, chúng tôi sẽ sử dụng nó để vẽ một hình ảnh canvas để chúng tôi có thể sửa đổi nó bằng JavaScript trước khi tiếp tục với máy chủ. Điều này chắc chắn sẽ tiết kiệm băng thông so với xử lý nó ở phía máy chủ.

Hình ảnh Canvas

Chúng tôi có thể thay đổi kích thước hình ảnh cũng như áp dụng các bộ lọc khác nhau cho hình ảnh canvas của chúng tôi. Tuy nhiên tôi sẽ không bao gồm chúng ở đây, tuy nhiên, bạn có thể lấy chúng từ các tệp nguồn. Khi hình ảnh canvas được vẽ, chuyển đổi nó thành định dạng URL tệp thông qua phương thức toDataURL và đính kèm nó vào Mẫu jQuery.

var getCanvasImage = function(image) {
 
    var imgWidth = 180,
        imgHeight = 180;
 
    //define canvas image
    var canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, imgWidth, imgHeight);
        
    //convert canvas to jpeg URL
    return canvas.toDataURL("image/jpeg");
}
Mẫu jQuery

Khi chúng tôi có mọi thứ chúng tôi cần, chỉ cần liên kết chúng với Mẫu jQuery và nối thêm vào phần tử #result của chúng tôi.

var createPreview = function(file, newURL) {   
    //populate jQuery Template binding object
    var imageObj = {};
    imageObj.filePath = newURL;
    imageObj.fileName = file.name.substr(0, file.name.lastIndexOf('.')); //subtract file extension
    imageObj.fileOriSize = convertToKBytes(file.size);
    imageObj.fileUploadSize = convertToKBytes(dataURItoBlob(newURL).size); //convert new image URL to blob to get file.size
                
    //append new image through jQuery Template
    var img = $("#imageTemplate").tmpl(imageObj).prependTo("#result");
}
Cần chuyển đổi newURL (ở định dạng DataURI) sang Blob để chúng ta có thể truy cập các thuộc tính của nó như kích thước tệp hoặc loại tệp cho dù từ phía máy khách hoặc phía máy chủ.

Đối với hàm dataURItoBlob , bạn có thể tìm thấy chúng trong tệp script.js bên trong các tệp nguồn.

Tải lên máy chủ

Cuối cùng nhưng không kém phần quan trọng, chúng ta có thể tải hình ảnh mới lên máy chủ của mình thông qua jQuery AJAX .

var uploadToServer = function(oldFile, newFile) {
    // prepare FormData
    var formData = new FormData(); 
    //we still have to use back some of old file data
    //since new file doesn't contains original file data
    formData.append("filename", oldFile.name);
    formData.append("filetype", oldFile.type);
    formData.append("file", newFile);
                    
    //submit formData using $.ajax         
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            //some success code here
        }
    });
}
Tạo script PHP Tải lên tập tin

Mặc dù đây không phải là một tập lệnh tải lên PHP hoàn chỉnh, nhưng hy vọng điều này sẽ giúp bạn biết cách nó hoạt động bên trong mã back end.

if(isset($_FILES['file'])) {
    if(move_uploaded_file($_FILES["file"]["tmp_name"],
                        "upload/".$_POST["filename"])) {
        echo 'Upload Success';
    } else {
        echo '#Fail';
    }
}
Chúc các bạn thành công.