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

در این مقاله میخواهیم در asp.net زمانی که کاربر یک تصویر را آپلود میکند در همان زمان بتواند تصویر را ببیند

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

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

ویژوال استدیو خود را باز کنید ویک پروژه جدید از نوع وب فرم بسازید سپس در پنجره Solution Explorer روی نام پروژه کلیک راست کنید و یک صفحه جدید به پروژه خود اضافه کنید به صفحه خود یک فایل آپلود و یک کنترل image اضافه کنید ودر رویداد Onchange فایل آپلود نام تابع ShowpImage را وارد کنید :

   <body>  
      <form id="form1" runat="server">  
         <div>  
            <fieldset style="width: 250px;">  
               <legend>Show image preview before image upload</legend>  
               <div align="center">  
                  <asp:Image ID="ImgShow" Height="150px" Width="150px" runat="server" /><br />  
                  <asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImage(this);" />  
               </div>  
            </fieldset>  
         </div>  
      </form>  
   </body>

تابع برای پیش نمایش به شکل زیر می باشد:

    <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>  
       <script type="text/javascript">  
          function ShowpImage(input) {  
             if (input.files && input.files[0]) {  
                var reader = new FileReader();  
                reader.onload = function (e) {  
                   $('#ImgShow').attr('src', e.target.result);  
                }  
                reader.readAsDataURL(input.files[0]);  
             }  
          }  
       </script>  

تابع بالا را در بخش head صفحه aspx خود اضافه کنید کد کامل صفحه aspx به شکل زیر می باشد:

<%@ 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>  
             Show image preview on File upload Control
          </title>  
          <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>  
          <script type="text/javascript">  
             function ShowpImage(input) {  
                if (input.files && input.files[0]) {  
                   var reader = new FileReader();  
                   reader.onload = function (e) {  
                      $('#ImgShow').attr('src', e.target.result);  
                   }  
                   reader.readAsDataURL(input.files[0]);  
                }  
             }  
          </script>  
       </head>  
       <body>  
          <form id="form1" runat="server">  
             <div>  
                <fieldset style="width: 250px;">  
                   <legend>Show image preview before image upload</legend>  
                   <div align="center">  
                      <asp:Image ID="ImgShow" Height="150px" Width="150px" runat="server" /><br />  
                      <asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImage(this);" />  
                   </div>  
                </fieldset>  
             </div>  
          </form>  
       </body>  
    </html>  

حالا برنامه رو اجرا کنید:

روی دکمه browse کلیک و یک تصویر انتخاب کنید: