استفاده از کنترل 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 قرار دهید.