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

دوشنبه 29 دی 1393

در این مقاله به پیش نمایش تصویر قبل از فرستادن تصویر به سرور با استفاده از 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>  

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

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید