توضیحات و دانلود

استفاده از کنترل AsyncFileUpload برای نمایش تصویر پس از آپلود بدون استفاده از page refresh یا postback در ASP.Net
0 0
استفاده از کنترل AsyncFileUpload برای نمایش تصویر پس از آپلود بدون استفاده از page refresh یا postback در ASP.Net

 با سلام در این مقاله  توضیح خواهیم داد که چگونه تصاویری را که با استفاده از کنترل جعبه ابزار AJAX  AsyncFileUpload  بدون refresh یا PostBack در صفحه وب ASP.Net یا پنل به روز رسانی ASP.NET AJAX آپلود شده اند، نمایش دهد. همه چیز با استفاده از جاوا اسکریپتclient side و پردازش server side انجام می شود.
اگر می خواهید در مورد چگونگی استفاده از AsyncFileUpload Control Toolkit AJAX Control Toolbox، بدانید مقاله زیر را مطالعه کنید
استفاده از کنترل AsyncFileUpload در جعبه ابزار Ajax در ASP.Net
و برای تأیید  کنترل جعبه ابزار AJAX  AsyncFileUpload به مقالات زیرمراجعه کنید .
استفاده از جاوا اسکریپت در نوع فایل و اعتبارسنجی در کنترل AsyncFileUpload با ASP.Net
پلاگین جی کوئری برای تایید انواع فایل و برنامه های افزودنی در کنترل AsyncFileUpload با ASP.Net
برای پاک کردن محتویات کنترل جعبه ابزار  AsyncFileUpload AJAX  بعد از آپلود به مقاله زیرمراجعه کنید .
پاک کردن محتویات کنترل AsyncFileUpload پس از آپلود و بازبینی صفحه در ASP.Net

برای نمایش تصویر پس از آپلود بدون پسوند PostBack و بدون refresh صفحه، ازرویداد  OnClientUploadComplete ,  client side  که در هنگام بارگذاری فایل با موفقیت آپلود می شود، استفاده می شود.
 
علامت گذاری به عنوان HTML

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AsyncFileUpload OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1"
    Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF"
    ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted = "uploadStarted"/>
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" /><br /><br />
<img id = "imgDisplay" alt="" src="" style = "display:none"/>
</form>

در بالا دو رویداد client side را در کنترل جعبه ابزار AJAX AsyncFileUpload Control  مشخص کرده ایم یعنی OnClientUploadComplete و OnClientUploadStarted . استفاده های خود را در بخش client side این مقاله توضیح خواهیم داد. همچنین یک تصویر HTML imgDisplay اضافه کرده ایم که برای نمایش تصویر آپلود شده استفاده می شود.
 
client side
کد client side بسیار ساده است که دارای یک متغیر رشته محافظت شده است که مسیر پوشه ای که تصاویر آن ذخیره می شود را ذخیره می کند. به طوری که می توان آن را نیز با استفاده از client side برای نمایش تصویر بعد از آپلود استفاده کرد.
و دیگری یک رویداد FileUploadComplete است که به سادگی فایل آپلود شده را روی دیسک در محل پوشه مشخص شده ذخیره می کند.
C #

protected string UploadFolderPath = "~/Uploads/";
protected void FileUploadComplete(object sender, EventArgs e)
{
    string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);   
}

VB.Net

Protected UploadFolderPath As String = "~/Uploads/"
Protected Sub FileUploadComplete(ByVal sender As Object, ByVal e As EventArgs)
    Dim filename As String = System.IO.Path.GetFileName(AsyncFileUpload1.FileName)
    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename)
End Sub

Client Side
در این بخش نمایش تصاویر پس از آپلود بدون پسوند PostBack یا refresh صفحه یا ASP.Net AJAX Panel Update صورت میگیرد .

<script type="text/javascript">
function uploadStarted() {
    $get("imgDisplay").style.display = "none";
}
function uploadComplete(sender, args) {
    var imgDisplay = $get("imgDisplay");
    imgDisplay.src = "images/loader.gif";
    imgDisplay.style.cssText = "";
    var img = new Image();
    img.onload = function () {
        imgDisplay.style.cssText = "height:100px;width:100px";
        imgDisplay.src = img.src;
    };
    img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
}
</script>

روش UploadStarted
این روش به سادگی تصویر HTML را برای نمایش تصویر پس از آپلود هر بار که یک فایل جدید بارگذاری می شود پنهان می کند.
روش UploadComplete
این روش کار واقعی نمایش تصویر را انجام می دهد. همانطور که در قسمت سبز رنگ مشاهده میکنید ، مسیر پوشه را به تصویر HTML اختصاص میدهیم و نام فایل آپلود شده که از روش get_fileName از کنترل جعبه ابزار AJAX AsyncFileUpload بدست می آید .
شما باید اسکریپت بالا را در قسمت سر صفحه یا ContentPlaceHolder در قسمت MasterPages قرار دهید.

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

لینک های دانلود

  • این آموزش فایلی برای دانلود ندارد

ارسال نظر
ارسال پیام به :