نمایش عکس در لحظه آپلود

m_kosari

New Member
سلام
با چه دستوری آدرس شی filefield را میشود گرفت. دستور زیر را برای گرفتن آدرس عکس نوشتم ولی مرورگر ها ساپرت نمی کنن.
PHP:
document.getElementById(file).value
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function prew(t){
   alert(t.value);
      document.getElementById('image1').src=t.value;
  
}
 
</script>
 
</head>
<body>
<form action="" method="post">
<input name="image" id="im" type="file" size="40" onChange="prew(this);">
</form>
<div  align="center">
<img id='image1' src='' height='250' width='250'>
</div>
</body>
</html>
روشی برای نمایش عکس هنگامی که کاربر عکس را انتخاب می کند، می خواهم.
 

m_kosari

New Member
من می خواهم با جاوااسکریپت یا ای جکس بدون رفرش صفحه همان لحظه که کاربر فایل را از Browse انتخاب کرد در کادر بالا نمایش داده بشود نه اینکه submit زده شود.
لینکی که دادید ظاهرا باید سابمیت زده شود بعد نشان دهد. من عکس را انتخاب کردم ولی همون لحظه نمایش نداد.
 

sharktech

کاربر فعال
این لینکی که دادم مثل اون چیزی که میخواین هست و نیازی به submit نداره!

در ضمن همون لحظه هم که نمیشه عکس رو نمایش داد!

باید عکس آپلود بشه و بعد از اینکه پیغام آپلود اومد, دوباره عکس آپلود شده رو بخونه و نشون بده.

احتمالا از مرورگر شما بوده چون من با فایرفاکس تست کردم و مشکلی نبود!
 

m_kosari

New Member
فکر کنم مشکل از مرور گر بود. البته من با فایر فوکس تست کردم به جای اینکه خود عکس را نشان دهد در کادر مینویسد upload .
من سورس صفحه را دیدم ولی روش کار را متوجه نشدم. میشه کدی که این کار رامیکند بگذارید.
 

my1zarb

Member
سلام
کد:
<script language="JavaScript" type="text/JavaScript">
function previewImage(fileInfo) {
var filename = "";
//create the path to your local file
if (fileInfo == null) {
if (document.form1.file != "") {
filename = "file:///" + document.form1.file.value;
}
} else {
filename = fileInfo;
}
//check if there is a value
if (filename == "") {
alert ("Please select a image.");
document.form1.file.focus();
} else {
//create the popup
popup = window.open('', 'imagePreview', )width=600,height=450,left=100,top=75,
screenX=100,screenY=75,scrollbars,location,menubar,status,toolbar,resizable=1');
//start writing in the html code
popup.document.writeln("<html><body bgcolor='#FFFFFF'>");
//get the extension of the file to see if it has one of the image extensions
var fileExtension = filename.substring(filename.lastIndexOf(".")+1);
if (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "gif"
|| fileExtension == "png")
popup.document.writeln("<img src='" + filename + "'>");
else
//if not extension fron list above write URL to file
popup.document.writeln("<a href='" + filename + "'>" + filename + "</a>");
popup.document.writeln("</body></html>");
popup.document.close();
popup.focus();
}
}
</script>

Now attach the function (onClick event) to your "Preview" button:

<INPUT TYPE="button" NAME="Button" VALUE="Preview" ONCLICK="previewImage(document.form1.file.value)">

Your form looks like this now:

<FORM ACTION="" METHOD="post" ENCTYPE="multipart/form-data" NAME="form1">
<INPUT TYPE="file" NAME="file">
<INPUT TYPE="button" NAME="Button" VALUE="Preview" ONCLICK="previewImage(document.form1.file.value)">
</FORM>
 

farik

Well-Known Member
با سلام..دوست عزیز فایر فاکس واسه کد شما access denied میده...راه دیگه ای نیست؟(آخه منم یک مدت دنبال این مطلب بودم چیز خاصی ندیدم)
 

eAmin

Well-Known Member
سلام
در مرورگرهای جدید مثل Apple Safari و Firefox و Chrome که از FileReader API پشتیبانی می کنند که یکی از تکنولوژی های مربوط به HTML5 هست می تونید استفاده کنید؛ روش تضمین شده ای هم هست.
 

m_kosari

New Member
سلام
در مرورگرهای جدید مثل apple safari و firefox و chrome که از filereader api پشتیبانی می کنند که یکی از تکنولوژی های مربوط به html5 هست می تونید استفاده کنید؛ روش تضمین شده ای هم هست.


من که در هر مرورگری تست می کنم جواب نمیده که نمیده. البته روی ویندوز 7 اجرا میکنم. ممکنه مشکل از سیستم عامل باشه؟
 

جدیدترین ارسال ها

بالا