پیش نمایش تصویر قبل از آپلود با استفاده از jquery در asp.net

در این مقاله به پیش نمایش تصویر قبل از فرستادن تصویر به سرور با استفاده از jquery در asp.net خواهیم پرداخت

پیش نمایش تصویر قبل از آپلود با استفاده از jquery در asp.net

این مقاله به صورت خلاصه و پرهیز از توضیحات اضافی برای کسانی که با asp.net و jquery آشنایی دارند مناسب است حال مستقیما به کدها می پردازم در صفحه defualt.aspx خود کد jquery زیر را وارد کنید:


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Preview Image While Upload</title>  
      
        <script src="jquery-1.8.2.js" type="text/javascript"></script>  
      
        <script type="text/javascript">  
            function ShowPreview(input) {  
                if (input.files && input.files[0]) {  
                    var ImageDir = new FileReader();  
                    ImageDir.onload = function(e) {  
                        $('#impPrev').attr('src', e.target.result);  
                    }  
                    ImageDir.readAsDataURL(input.files[0]);  
                }  
            }  
        </script>  
      
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <table cellpadding="10" cellspacing="4" width="70%" align="center" style="border: Solid 10px Green;  
            font-weight: bold; font-size: 16pt; background-color: Skyblue; color: Blue;">  
            <tr>  
                <td align="center">  
                    Upload Images  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    Select Your File To Upload #:  
                    <input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />  
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" />  
                </td>  
            </tr>  
            <tr>  
                <td>  
                    <asp:Image ID="impPrev" runat="server" Height="200px" />  
                </td>  
            </tr>  
        </table>  
        </form>  
    </body>  
    </html>  

به همین سادگی کار تمام است و حالا میتوانید برنامه خود را اجرا کنید :

فایل های ضمیمه