پیش نمایش عکس قبل از آپلود در سرور

[barzin144]

باسلام ،
همون طور که میدونید وقتی از fileupload استفاده میکنیم باید یک دکمه قرار بدیم که سمت سرور کد آپلود عکس را اجرا کنه و بعد در یک تگ img نمایشش بدهیم
امروز میخوام کدی را در اختیارتون بگذارم که قبل از آپلود عکس در همان لحظه که طرف عکس را انتخاب کرد بهش نشون بده در صورتی هنوز در سرور آپلود نشده است.

این کد javascript را اضافه کنید.



function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();


reader.onload = function (e) {
$('#imgProfile').attr('src', e.target.result);
}


reader.readAsDataURL(input.files[0]);
}
}




و این هم کد html



<asp:Image ID="imgProfile" runat="server" Width="150" />
<asp:FileUpload ID="ImageUpload" runat="server" onchange="readURL(this);" style="display:none" />
<input type="button" onclick="$('#ImageUpload').click();"
value="انتخاب عکس" class="button" style="font-size:12px"/>

در کد بالا fileupload را نمایش نمیدهم و به جای آن دکمه ای که خودم دوست دارم گذاشتم که رو click دکمم fileupload را باز میکنم، در onchange فایل آپلود هم اون تابع جاوا اسکریپت را صدا میزنم.
اضافه کردن Jquery را فراموش نکنید.ترجیها از ورژن های جدید استفاده کنید.

[alireza_s_84]

باسلام ،
همون طور که میدونید وقتی از fileupload استفاده میکنیم باید یک دکمه قرار بدیم که سمت سرور کد آپلود عکس را اجرا کنه و بعد در یک تگ img نمایشش بدهیم
امروز میخوام کدی را در اختیارتون بگذارم که قبل از آپلود عکس در همان لحظه که طرف عکس را انتخاب کرد بهش نشون بده در صورتی هنوز در سرور آپلود نشده است.

این کد javascript را اضافه کنید.



function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();


reader.onload = function (e) {
$('#imgProfile').attr('src', e.target.result);
}


reader.readAsDataURL(input.files[0]);
}
}




و این هم کد html



<asp:Image ID="imgProfile" runat="server" Width="150" />
<asp:FileUpload ID="ImageUpload" runat="server" onchange="readURL(this);" style="display:none" />
<input type="button" onclick="$('#ImageUpload').click();"
value="انتخاب عکس" class="button" style="font-size:12px"/>

در کد بالا fileupload را نمایش نمیدهم و به جای آن دکمه ای که خودم دوست دارم گذاشتم که رو click دکمم fileupload را باز میکنم، در onchange فایل آپلود هم اون تابع جاوا اسکریپت را صدا میزنم.
اضافه کردن Jquery را فراموش نکنید.ترجیها از ورژن های جدید استفاده کنید.
یادتون باشه توی IE فقط از ورژن 10 به بالا جواب میده.