Chủ nhật, ngày 4 tháng 12 năm 2016

Hướng dẫn sử dụng CKFinder làm file Manager

Ngày đăng: 5/9/2012, 16:31:26PM | Lượt xem: 6,781
Hot!

 lượn vượn qua diễn đàn dnnvn.net thấy bài viết hay của pác  mr Slowly hay quá up lên đây cho các ae tham khảo cùng

Đặt vấn đề:

Trong những ứng dụng anh em từng viết, nhất là các ứng dụng liên quan tới tin tức, chúng ta thường có một trường tên là Hình minh họa, giá trị này có thể được cập nhật thông qua việc upload một file trên server (ngay trong bài viết hoặc paste url của một ảnh sẵn có vào trường textbox đi kèm - đây là cách mà mình hay dùng, có thể chưa phải là cách hay tuy nhiên cứ tạm đưa ra để anh em dễ hình dung) Để rõ hơn vấn đề

 

 xin mời anh em xem thêm hình minh họa bên dưới:

Tùy theo mỗi ứng dụng có cách xử lý riêng, tuy nhiên mình nhận thấy rằng, mỗi lần code các form có dạng upload như này, anh em sẽ mất công paste lại một đoạn  code upload file ở đâu đó vào trong ứng dụng đang code. Nếu có  N-FORM thì anh em phải xử lý N-Lần gọi hàm upload. Như vậy cũng sẽ khá mất công. Đặc biệt nếu những file anh em đã từng upload lên server rồi, nay muốn chọn lại thì quả thực thấy khó khăn (có thể mò lại đường dẫn để paste vào hoặc upload một file đã tồn tại (duplicate) lên server). Nay mình xin đề xuất 1 cách mà mình đã xử lý. Đó là sử dụng CKFinder làm file manager, mỗi lần muốn chọn ảnh, anh em chỉ cần bật ckfinder lên, các việc như upload, chọn ảnh đã có, ckfinder sẽ xử lý giúp anh em. Việc còn lại chỉ là click vào để nó ném cho mình cái url xuống textbox là OK.

Ưu điểm của việc sử dụng CKFinder làm File Manager:

- Cách nhúng đơn giản dễ dàng

- Sử dụng được nhiều lần trên các form khác nhau chỉ việc thay đổi một chút về cấu hình

- Trực quan, sử dụng lại được các tệp đã có - hạn chế được việc upload trùng lặp các tệp tin.

Hình minh họa cho ứng dụng demo

Mô tả hoạt động: Để chọn một ảnh hoặc upload một ảnh lên server, người dùng bấm vào phím chọn (bước 1)

Control CKFinder hiện ra, tại đây chúng ta có thể chọn một ảnh đã tồn tại hoặc upload một ảnh mới thông qua CKFinder và chọn ảnh (bước 2)

Sau khi chọn ảnh, địa chỉ url của ảnh tự động được gán trả lại cho textbox control vậy là ta đã chọn được ảnh. (bước 3)

Hướng dẫn

MrSlowly khi tìm hiểu vấn đề này cũng đã search google xem đã có anh em nào làm chưa để tham khảo (nếu có rồi thì lấy luôn về xem, đỡ phải dày công ngồi ngâm cứu ) tuy nhiên không tìm được như mong muốn nên tìm tiếp. Khi tìm tiếp, MrSlowly đã vào thẳng trang của CKFinder để tìm, cũng đã download cái đống API về nghiên cứu, tuy nhiên tài liệu cũng không được đầy đủ cho lắm (vì không có code demo mà chỉ mô tả text chung chung). Lượn qua trang demo của CKFinder thế nào lại vớ được cái demo của nó. Phù hợp với yêu cầu của mình thế là tìm cách học lỏm cách của họ.

Thực ra khi tìm hiểu thì mất công, còn khi đã tìm được rồi thì mới thấy thật đơn giản và nghĩ mình đúng là gà ;))

Cái demo tương ứng của nó nằm ở đây: http://ckfinder.com/demo (Bác nào vào thì chọn tab Enhancing HTML Forms để thử)

Sau khi tìm thấy có ví dụ demo rồi, bước tiếp theo là ngồi mò xem họ làm như thế nào, sau một hồi mò thì tìm được đoạn code tích hợp. Vẻn vẹn chỉ có mấy dòng.Mà trong ứng dụng của mình, MrSlowly đã lược lại còn như sau:

@Html.EditorFor(model => model.ImageUrl)
<input type="button" value="Chọn ..." id="btnSelectImg" name="btnSelectImg" />

CODE JAVASCRIPT:

<script src="@Url.Content("~/ckfinder/ckfinder.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSelectImg").click(function () {
            var finder = new CKFinder();
            finder.selectActionFunction = function (fileUrl) {
                $('#ImageUrl').val(fileUrl);
            };
            finder.popup();
        });
    });
 </script>

Ở đây, MrSlowly sử dụng MVC3, lát nữa sẽ code hẳn riêng một cái demo dành cho bác nào sử dụng ASP.NET thuần.

Khi đọc code, ta mới thấy hóa ra nó hỗ trợ hết cơ bản là mình gà và không biết mò đúng chỗ mà thôi.

Trong đoạn code JavaScript bên trên, có sử dụng jQuery, ý nghĩa của đoạn code trên như sau:

Gán code cho sự kiện Click của button có ID là btnSelectImg, Khi người dùng click, nó sẽ mở ra cửa sổ CKFinder, kết quả trả về của cửa sổ CKFinder sẽ được đem gán cho TextBox có ID là ImageUrl

Demo Asp.net Download

Demo mvc3 Download

theo dnnvn.net
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.