پیش نمایش تصویر قبل از آپلوددر 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 کلیک و یک تصویر انتخاب کنید:

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

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

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

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید