چجایگزین عکس به جای دگمه

royatemp

royatemp

Member
با سلام و اجترام
دوستان عکسی میتونه بهم بگه چجوری میتونم عکسو جایگزین impout box کنم
مثل فیسبوک که در کامنت هاش که وقتی کلیک میکنی امپوت باز میشه و فیل مورد نظرتو
آپلود میکنی تصویر زیر به جای دگمه امپوت باکس

Image 1.png
موفق باشین
در پناه حق تعالی
 
farik

farik

Well-Known Member
باسلام..
دوست عزیز برای این کار از رویداد ها استفاده میکنن...بیشتر هم رویداد onclick و یک تابع رو به این رویداد وصل میکنن...این کلیت قضیه هست..ولی جزئیاتش باز زیاده..که این رو چطوری هندل کته برنامه نویس..
موفق باشید..
 
farik

farik

Well-Known Member
با سلام..
خوب این جا من یک نمونه مشابه چیزی که گفته بودین رو آوردم..
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script>
function file_opener(){
	document.getElementById('file_opener').click();
}
</script>
<img src="https://www.google.com/images/srpr/logo11w.png" onclick="file_opener();"  style="cursor:pointer;cursor:hand;"/>
<input type="file" id="file_opener" />
</body>
</html>
وقتی که روی عکس کلیک کنین،دیالوگ انتخاب فایل باز میشه.
موفق باشید..
 
royatemp

royatemp

Member
farik گفت:
با سلام..
خوب این جا من یک نمونه مشابه چیزی که گفته بودین رو آوردم..
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script>
function file_opener(){
    document.getElementById('file_opener').click();
}
</script>
<img src="https://www.google.com/images/srpr/logo11w.png" onclick="file_opener();"  style="cursor:pointer;cursor:hand;"/>
<input type="file" id="file_opener" />
</body>
</html>
وقتی که روی عکس کلیک کنین،دیالوگ انتخاب فایل باز میشه.
موفق باشید..
کلیک کنید تا باز شود...

خسته نباشین
واقعا ممنون از شما
ببخشین آیا راهی هست واسه حذف دگمه browes ؟ یعنی فقط عکس بمونه ؟
 
farik

farik

Well-Known Member
خوب کافیه دکمه رو با استایل display:none یا visibility:hidden کار کنی..
موفق باشید
 
royatemp

royatemp

Member
farik گفت:
خوب کافیه دکمه رو با استایل display:none یا visibility:hidden کار کنی..
موفق باشید
کلیک کنید تا باز شود...

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

[HTMLS]<?php
include('db.php');
session_start();
$session_id='1'; //$session id
?>
<html>
<head>
<title>Ajax Image Upload 9lessons blog</title>
</head>

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript" >


$(document).ready(function() {

$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();

});
});
</script>

<style>

body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}

</style>
<body>
<a href='http://9lessons.info'>9lessons.info</a>


<div style="width:600px">


<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>


</div>
</body>
</html>[/HTMLS]

اینم لینک کامل آپلودر پیشاپیش ممنون از راهنماییتون http://www.hotup.ir/upload/b9j7_ajaximageupload.zip
 
farik

farik

Well-Known Member
با سلام..
به جای فایل ایندکس این رو بگذارین:
[HTMLS]
<?php
//include('db.php');
session_start();
$session_id='1'; //$session id
?>
<html>
<head>
<title>Ajax Image Upload 9lessons blog</title>
</head>

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript" >
$(document).ready(function() {

$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();

});
$('#uploadDialoge').click(function(){
$('#photoimg').click();
});
});
</script>

<style>

body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}
#photoimg{
display:none;
}
</style>
<body>
<a href='http://9lessons.info'>9lessons.info</a>


<div style="width:600px">

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
<img src="you image" id="uploadDialoge">
</form>
<div id='preview'>
</div>


</div>
</body>
</html>
[/HTMLS]
موفق باشید..
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

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

بالا