Drag & Drop upload multiple file với Asp.net C# & Dropzone.js

Upload multiple file là một chức năng được dùng khá nhiều trong các project về website, trước đây mình cũng đã chia sẻ một ví dụ về upload multiple file với jquery & asp.net c#, nhưng cách đây ít hôm mình có tìm được thằng Dropzone.js hỗ trợ upload file có vẻ hay hơn nhiều, khi kết hợp với Asp.net C# và áp dụng vào project mình đang làm thực sự thấy nó đem lại hiệu quả rất ưng ý. 

1. Dropzone.js

Thằng này là một open source hỗ trợ drag & drop files upload và preview, nó cung cấp cho người dùng một UI thực sự rất mượt mà.. Để tìm hiểu kỹ hơn về Dropzone.js các bạn tham khảo thêm tại đây

2. Kết hợp Dropzone.js & Asp.Net

Vấn đề là thằng này nó chỉ hỗ trợ mình về phía client, để áp dùng nó vào các dự án web thì phía server (asp.net, php...) mình phải làm thêm một chút để có được một chức năng hoàn thiện phù hợp hơn.

Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself

Trước tiên các bạn download Dropzone tại đây, khi download về mình chỉ cần sử dụng 2 file là dropzone.js & dropzone.css thôi :)

Tiếp theo ta cần một file UploadProcess.ashx để xử lý vấn đề upload ở phía server

<%@ WebHandler Language="C#" Class="hn_SimpeFileUploader" %>

using System;
using System.Web;
using System.IO;
using System.Drawing;

public class hn_SimpeFileUploader : IHttpHandler {

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";

    string dirFullPath = HttpContext.Current.Server.MapPath("~/Uploads/");
    string[] files;
    int numFiles;
    files = System.IO.Directory.GetFiles(dirFullPath);
    numFiles = files.Length;
    numFiles = numFiles + 1;

    string str_image = "";

    foreach (string s in context.Request.Files)
    {
        HttpPostedFile file = context.Request.Files[s];
        string fileName = file.FileName;
        string fileExtension = file.ContentType;

        if (!string.IsNullOrEmpty(fileName))
        {
            fileExtension = Path.GetExtension(fileName);
            str_image = Guid.NewGuid() + fileExtension; //random file name
            string pathToSave = HttpContext.Current.Server.MapPath("~/Uploads/") + str_image;
            file.SaveAs(pathToSave);
            //Save file to database with pathFile = '/Uploads/' + str_img
        }
    }
    context.Response.Write(str_image);
}
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    

}

Khi xử lý upload file thường xẩy ra trường hợp trùng tên file dẫn đến lỗi hoặc ghi đè không mong muốn,  do vậy ta cần tạo tên file random trước khi upload lên server, mình dùng luôn thằng Guid của C# cho tiện.

str_image = Guid.NewGuid() + fileExtension; //random file name

Cần chú ý ở đây ví dụ như khi upload file xong ta có thể gọi hàm để lưu đường dẫn file vào database nếu cần.

file.SaveAs(pathToSave);
//Save file to database with pathFile = '/Upload/' + str_img

 

Phần layout html phía ngoài ta cần thêm file dropzone.css vào <head> của trang và 1 thẻ <div> là nơi để drag & drop các file cần upload

<div id="dZUpload" class="dropzone">
                        <div class="dz-default dz-message">
                            Drop image here. 
                        </div>
</div>
<a href="javascript:void(0)" class="btn btn-primary" id="btnStartUpload">Upload File</a>

 

Và tiếp theo là đoạn javascript để xử lý

 <script src="js/dropzone.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            Dropzone.autoDiscover = false;

            var myDropzone = new Dropzone('#dZUpload', {
                url: "UploadProcess.ashx",
                maxFiles: 20,
                parallelUploads: 20,
                addRemoveLinks: true,
                autoProcessQueue: false,
                maxFilesize: 2, // MB       
                acceptedFiles: 'image/*',
                init: function () {
                    var th = this;
                    this.on('queuecomplete', function () {
                        // CALL IMAGE LOADING HERE
                        setTimeout(function () {
                            th.removeAllFiles();
                        }, 5000);
                    })
                },
                success: function (file, response) {
                    var imgName = response;
                    file.previewElement.classList.add("dz-success");
                },
                error: function (file, response) {
                    file.previewElement.classList.add("dz-error");
                    $(file.previewElement).find('.dz-error-message').text(response);
                }
            });

            $('#btnStartUpload').click(function () {
                myDropzone.processQueue();
            });
        });
    </script>

 

Ở phần này ta cần chú ý một số điểm sau

  • url: Ở đây là file xử lý upload phía server khi dropzone nó gọi, ở đây file của mình vừa làm ở trên là UploadProcess.ashx
  • maxFile & parallelUploads: Số lượng file upload và xử lý đồng thời tối đa trong 1 lần (Trong ví dụ này mình giới hạn chỉ upload được tối đa 20 file một lần
  • autoProcessQueue: Nếu đặt false thì sau khi lựa chọn file nó sẽ tự upload luôn, ở đây mình đặt false mà chỉ upload khi mình click vào button upload
  • Sự kiện queuecomplete: Sau khi upload xong toàn bộ file lựa chọn dropzone nó sẽ gọi hàm này, ở đây mình có thể xử lý việc reload lại trang nếu cần.

 

Các bạn có thể download source code đẩy đủ ở file đính kèm cuối bài viết

Download Source

Related Post


Tổng hợp video học Asp.Net MVC
Friday, November 6, 2015
Trước đây mình cũng có tìm được một số video về MVC4 bằng Tiếng Việt, hôm nay mình xin giới thiệu thêm một số video bằng tiếng Anh, trong đó có một số phần đi sâu khá hay đáng tham khảo
String Format for Double C#
Monday, September 7, 2015
Ở bài này giới thiệu một số cách chuyển dữ liệu kiểu float, double sang kiểu string để hiện thị một cách rõ ràng dễ nhìn. Thường áp dụng hiện thị về giá tiền sản phẩm...
Search

Đăng ký nhận bài mới


Category

Blog Archive