سوال: نمایش همزمان عکس در image با upload عکس [بایگانی]

yekta64

پنج شنبه 05 آذر 1388, 11:03 صبح

سلام دوستان
من یه کنترل fileupload دارم می خوام وقتی کاربر روی کلیک browse این کنترل کلیک میکنه و عکسش رو انتخاب می کنه با بستن پنجره انتخاب عکس عکس انحاب شده توی یه کنترل image نمایش داده بشه باید از چه روشی استفاده کنم؟

yekta64

جمعه 06 آذر 1388, 20:07 عصر

سلام من بازم سوالام رو مطرح می کنم
آیا این امکان وجود داره به محض انتخاب عکس در کنترل فایل fileuplod اون عکس رو در کنترل image نمایش بدیم؟

raziee

جمعه 06 آذر 1388, 20:48 عصر

خیر.
چون فایل روی کامپیوتر شماست.
میتونید فایل رو ابتدا در سرورتون آپیود کنید و سپس نمایش بدید.

yekta64

شنبه 07 آذر 1388, 21:59 عصر

خیر.
چون فایل روی کامپیوتر شماست.
میتونید فایل رو ابتدا در سرورتون آپیود کنید و سپس نمایش بدید.

سلام مرسی
چطور من باید این کار رو انجامبدم آخه من باید بابعد از زدن دکمه browse و انتخاب عکس و بستن پنجره عکس رو توی کنترل image قرار بدم روی دکمه ی دیگه نباید کلیک بشه
ممنون میشم بیشتر توضیح بدید

niksoft

شنبه 07 آذر 1388, 22:46 عصر

شما باید در ابتدا به روش زیر نام عکس رو بگیری(مثلا نام عکس = aks.jpg)
(فرض کن c:\ آدرس فولدر سروره که عکسارو روش میریزی)

Dim fileName As String = FileUpload1.PostedFile.FileName
fileName = Path.GetFileName(fileName)
FileUpload1.PostedFile.SaveAs(Path.Combine("c:\", fileName))

بعد imageurl کنترل image رو مساوی با c:\aks.jpb قرار بده
اگه میخوای صفحه رفرش نشه میتونی کنترل image رو داخل آپدیت پنل قرار بدی (scriptmanager یادت نره)

yekta64

شنبه 07 آذر 1388, 22:51 عصر

شما باید در ابتدا به روش زیر نام عکس رو بگیری(مثلا نام عکس = aks.jpg)
(فرض کن c:\ آدرس فولدر سروره که عکسارو روش میریزی)

Dim fileName As String = FileUpload1.PostedFile.FileName
fileName = Path.GetFileName(fileName)
FileUpload1.PostedFile.SaveAs(Path.Combine("c:\", fileName))

بعد imageurl کنترل image رو مساوی با c:\aks.jpb قرار بده
اگه میخوای صفحه رفرش نشه میتونی کنترل image رو داخل آپدیت پنل قرار بدی (scriptmanager یادت نره)

سلام
ممنون
مشکل من اینه که نمی دونم این کد رو باید کجا بنویسم یا اینکه توی چه رویدادی بنویسم؟

niksoft

شنبه 07 آذر 1388, 22:53 عصر

یه دکمه بزار و تو event پیج لودش کد رو بنویس تا با زدن دکمه عکس آپلود بشه

yekta64

شنبه 07 آذر 1388, 22:57 عصر

یه دکمه بزار و تو event پیج لودش کد رو بنویس تا با زدن دکمه عکس آپلود بشه

مرسی
ولی من نمی خوام یه دکمه ی دیگه بذارم
سوالم هم این بوده که چطور با زدن دکمه browse کنترب فایل اپلود عکس انتخاب شده توی کنترل ایمیچ نمایش داده بشه نه اینکه یه دکمه دیگه بذارم شما راه حلی در این زمینه ندارید؟

niksoft

شنبه 07 آذر 1388, 23:00 عصر

دوست عزیز این چیزی که شما میگید امکان پذیر نیست
چون شما با زدن دکمه browse فقط میتونید عکس رو انتخاب کنید

yekta64

شنبه 07 آذر 1388, 23:10 عصر

دوست عزیز این چیزی که شما میگید امکان پذیر نیست
چون شما با زدن دکمه browse فقط میتونید عکس رو انتخاب کنید

با بستن پنجره ی open که با زدن دکمه ی browse باز میشه چطور ؟
در این صورت هم نمیشه کاری انجام داد؟
اخه من توی یه سایت که البته با php طراحی شده بود اینو دیدم یعنی با asp.netاین کار امکان پذیر نیست؟

niksoft

شنبه 07 آذر 1388, 23:16 عصر

من event ی ندیدم که با بستن پنجره فایر بشه
مگر اینکه خودتون یه مودال دیالوگ طراحی کنید که عکسا توش نمایش داده بشه و پس از بستنش عکس منتخب نمایش داده بشه
البته شاید کنترل ایجکسی وجود داشته باشه واسه این کار
تو codeproject.com یه جستجو بزنید

majnun

یک شنبه 08 آذر 1388, 00:43 صبح

اگه به وسیله ی یک تکست باکس و یک دکمه کنترل فایل آپلود رو شبیه سازی کنید فکر کنم بشه این کارو کرد

در رویداد دکمه ای که کنار تکست باکسه به صورن دینامیک با قابلیت های دات نت مانند openfiledialog
یا همون فایل آپلود عکستون رو آپلود کنید

اینجوری جواب میده

yekta64

یک شنبه 08 آذر 1388, 09:21 صبح

اگه به وسیله ی یک تکست باکس و یک دکمه کنترل فایل آپلود رو شبیه سازی کنید فکر کنم بشه این کارو کرد

در رویداد دکمه ای که کنار تکست باکسه به صورن دینامیک با قابلیت های دات نت مانند openfiledialog
یا همون فایل آپلود عکستون رو آپلود کنید

اینجوری جواب میده

سلام مرسی
چطور با زدن اون دکمه پنجره ی فایل آپلود رو باز کنم؟
میشه بیشتر توضیح بدید

Alirs1

یک شنبه 08 آذر 1388, 11:11 صبح

yekta64

یک شنبه 08 آذر 1388, 13:43 عصر

<body>

<form id="form1" runat="server">

<IMG style="CLEAR: both; src="member.gif" name=imgPic>
<INPUT style="WIDTH: 126px; COLOR: gray; HEIGHT: 22px" readOnly size=15 value="عکس پرسنلي">
<INPUT id=ffPic style="WIDTH: 37px; HEIGHT: 22px" onpropertychange="if (ffPic.value!='') imgPic.src=ffPic.value" tabIndex=5 type=file size=1 name=ffPic>

</form>

</body>

سلام مرسی
میشه یه مقدار در باره کدتون توضیح بدید؟
ممنون

sahele_sheni

یک شنبه 08 آذر 1388, 18:16 عصر

سلام . دوست عزیز این کار یه راه حل ساده داره .
این کد رو به اول صفحه اضافه کن .(قسمت Head)

<script language="javascript" type="text/javascript">
function show(){
var img=document.getElementById('image');
var pic=document.getElementById('fileupload1');
img.src=pic.value;
}
</script>

این کد هم برای شی فایل اپلود هست .به محض ایکه عکس رو انتخاب کنی ، عکس توی شی image رو عوض میکنه .

<input type="file" onchange=" return show()" runat="server" id="fileupload1" />

اینم از شیئ image

<img id="image" style="width: 545px; height: 405px" runat="server" /

موفق باشید.

Mostafa_Dindar

یک شنبه 08 آذر 1388, 20:53 عصر

سلام . دوست عزیز این کار یه راه حل ساده داره .
این کد رو به اول صفحه اضافه کن .(قسمت Head)

<script language="javascript" type="text/javascript">
function show(){
var img=document.getElementById('image');
var pic=document.getElementById('fileupload1');
img.src=pic.value;
}
</script>
این کد هم برای شی فایل اپلود هست .به محض ایکه عکس رو انتخاب کنی ، عکس توی شی image رو عوض میکنه .

<input type="file" onchange=" return show()" runat="server" id="fileupload1" />
اینم از شیئ image

<img id="image" style="width: 545px; height: 405px" runat="server" /
موفق باشید.
وقتي كه FileUpload يا InputFile رو كليك ميكنيد ديالوگ انتخاب فايل مياد كه ميتونيد فايلهاتون رو تو كامپيوتر خودتون (كلاينت) انتخاب كنيد پس اسكريپت پيشنهادي شما وقتي كار ميكند كه عكس رو تو هاست انتخاب كنيد كه از قبل آپلود شده و اين كار عملا امكان پذير نيست .
بايد كدي نوشته بشه كه بعد از انتخاب عكس اونو به هاست منتقل كنه و آدرس اونو به Image بده . كه Transfer فايل به هاست هم RealTime امكان پذير نيست .
در كل خواسته نويسنده تاپيك معقول به نظر نميرسه

yekta64

دوشنبه 09 آذر 1388, 08:11 صبح

سلام
از جواب همه ی دوستان مممنون هستم

yekta64

دوشنبه 09 آذر 1388, 08:13 صبح

وقتي كه FileUpload يا InputFile رو كليك ميكنيد ديالوگ انتخاب فايل مياد كه ميتونيد فايلهاتون رو تو كامپيوتر خودتون (كلاينت) انتخاب كنيد پس اسكريپت پيشنهادي شما وقتي كار ميكند كه عكس رو تو هاست انتخاب كنيد كه از قبل آپلود شده و اين كار عملا امكان پذير نيست .
بايد كدي نوشته بشه كه بعد از انتخاب عكس اونو به هاست منتقل كنه و آدرس اونو به Image بده . كه Transfer فايل به هاست هم RealTime امكان پذير نيست .
در كل خواسته نويسنده تاپيك معقول به نظر نميرسه

از پاسختون خیلی ممنون هستم اما اینکه میگید خواسته ی نویسنده غیر معقول هستش درست نیست این یه سوال بود و این تالار هم برای مطرح کردن سوالات هستش تا بتونیم اطلاعات خودمون رو افزایش بدیم به هر حال مرسی

yekta64

دوشنبه 09 آذر 1388, 10:27 صبح

دوستان راه حل دیگه ی برای این کار ندارید؟

frigga

شنبه 17 اسفند 1392, 11:17 صبح

سلام
با jquery میشه این کارو انجام داد
کد:
<%@ 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">
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/jscript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#filePhoto").change(function () {
readURL(this);
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FilePhoto" runat="server" onchange="readURL(this)" /><br />
<img id="blah" src="#" alt="Preview" width="100" height="100" />
</div>
</form>
</body>
</html>

frigga

شنبه 17 اسفند 1392, 11:20 صبح

سلام
با jquery میشه این کارو انجام داد
کد:
<%@ 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">
<script src="jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/jscript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#filePhoto").change(function () {
readURL(this);
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FilePhoto" runat="server" onchange="readURL(this)" /><br />
<img id="blah" src="#" alt="Preview" width="100" height="100" />
</div>
</form>
</body>
</html>

mRizvandi

یک شنبه 18 اسفند 1392, 00:05 صبح

سلام دوست عزیز
خواسته شما معقوله نگران نباشید. البته در HTML 5.0 و البته با استفاده از کمی جاوا اسکریپت.
امکان خوندن فایل در سمت کلاینت در HTML 5 اضافه شده و شما می تونید با کمی کد جاوا اسکریپت تصویر رو لود کنید و سپس در یک محل نمایش بدید. مثل خیلی از سایتهای امروزی که این کار رو می کنند.
یک سایت مثال هم براتون می فرستم و امیدوارم که بتونید قدم به قدم پیاده سازی کنید.
امکاناتی که در این APIهای جدید اضافه شده به شما این قابلیت رو میده که مشخصات فایل رو هم بخونید. از جمله تاریخ و ساعت، نوع فایل، حجم فایل، محتوای فایل و ... ارسال چند یک یا چند فایل بطور همزمان و امکان Drag and Drop و ...
http://www.html5rocks.com/en/tutorials/file/dndfiles/