Hiển thị ảnh xem trước khi upload trong Asp.Net

Hiển thị ảnh xem trước do người dùng lựa chọn trước khi upload là một chức năng rất hay, thứ nhất nó thân thiện với người dùng, thứ hai đảm bảo không nhầm lẫn khi cập nhật hình ảnh. Trong bài này, ta sẽ áp dụng tính năng tiên tiến của HTML5 để thực hiện việc này

HTML5 cho phép chúng ta tương tác với FileSystem của client,  trong chức năng upload lựa chọn hình ảnh này, khi người dùng lựa chọn hình ảnh cần upload ta sử dụng một hàm có tên FileReader có chức năng đọc nội dung file lựa chọn. Đê dễ hiểu, các bạn hãy xem đoạn mã code dưới đây.

Trước tiên, trong file *.aspx của chúng ta, hãy tạo một đoạn mã HTML như dưới đây.

<table>
            <tr>
                <th>Test display img</th>
            </tr>
            <tr>
                <td>
                    <asp:FileUpload ID="FileUpload1" CssClass="FileUpload1" runat="server" onchange="readURL(this);"/>
                </td>
            </tr>
            <tr>
                <td>
                    Img:
                    <asp:Image ID="imgDisplay" runat="server" />
                </td>
            </tr>
        </table>

Tiếp theo, ta cần thêm một hàm javascript để đọc nội dung file lựa chọn ở FileUpload chúng ta có ở trên

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#imgDisplay')
                            .attr('src', e.target.result)
                            .width(150)
                            .height(200);
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>

Ở đây, tôi dùng thư viện jQuery để hỗ trợ việc lựa chọn Image có Id='imgDisplay', các bạn có thể dùng javascript thông thường để viết lại đoạn này mà không cần include thêm thư viện jquery trên.

var img = document.getElementById("imgDisplay");
img.src = e.target.result;
img.style.width=150;
img.style.height=200;

Chỉ cần một hàm javascript đơn giản như trên, ta đã có một chức năng xem trước hình ảnh rồi, tuy nhiên vì sử dụng API HTML nên một số trình duyệt cũ còn chưa hỗ trợ hoặc chỉ hỗ trợ một phần.

Version IE FF GC Safari Opera iOS Safari Opera mini Android browser BB browser Opera mobile GC for Android FF for Android
3 ver trước 6 13 18 4.0 11.1 4.0-4.1   2.3   11.0    
2 ver trước 7 14 19 5.0 11.5 4.2-4.3   3.0   11.1    
ver trước 8 15 20 5.1 11.6 5.0-5.1   4.0   11.5    
Hiện tại 9 16 21 6.0 12.0 6.0 5.0-7.0 4.1 7.0 12.0 18.0 15
Sắp tới 10 17 22   12.1       10.0 12.1    
Tương lai   18 23   12.5              

Không hỗ trợ Hỗ trợ một phần Hỗ trợ

Các bạn có thể download file đính kèm ở cuối bài viết về để nghiên cứu rõ hơn. Chúc các bạn thành công!

Download Source

Related Post


Rewrite Url website với Asp.net Routing
Sunday, September 29, 2013
Rewrite Url không phải là một khái niệm xa lạ đối với những lập trình viên web, ngoài vấn đề về bảo mật, nó còn giúp tạo được một đường dẫn thân thiện với người dùng và SEO hơn. Những năm trước đây, khi phát triên web trên nền tảng .Net 2.0 và 3.5, tôi hay sử dụng một dll có tên UrlRewritingNet.UrlRewriter để hỗ trợ việc này. Tuy nhiên đến khi nâng cấp lên .Net 4.5 tôi nhận thấy một vấn đề là Urlwrite theo cách cũ đã không còn hoạt động, lên google lục lọi thì mới biết dll này hiện tại chỉ hỗ trợ với .Net 1.1 đến 4.0.... và sử dụng Asp.net Routing là một phương pháp khá hay để giải quyết vấn đề này.
Less CSS for .NET
Friday, September 27, 2013
LESS là một CSS framework rất hay, nó giúp các nhà phát triển web tiết kiệm thời gian, đồng thời cũng làm cho các đoạn mã CSS dễ dàng quản lý và sử dụng lại hơn. Ở bài trước tôi đã giới thiệu đến các bạn về cách sử dụng Less để viết CSS một cách khoa học. Ở bài này chúng ta sẽ tìm hiểu thêm một dll có tên dotLess, nó được phát triển riêng dành cho Asp.Net và khắc phục được một số nhược điểm mà Less gặp phải
Search

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


Category

Blog Archive