PDA

View Full Version : اپلود ایکون با ajax



amin_sltny
دوشنبه 23 بهمن 1391, 12:28 عصر
سلام دوستان

چه جوری باید با ajax فایلی را اپلود کنیم.

می خوام با استفاده از جی کوئری باشه و $.POST()

2undercover
دوشنبه 23 بهمن 1391, 13:59 عصر
امکانش نیست ! می تونید از iframe استفاده کنید یا از فریم ورک های دیگه!

amin_sltny
دوشنبه 23 بهمن 1391, 15:32 عصر
پس دوست عزیر من چه کار باید بکنم

آخه من یه فرم دارم که چند قسمت داره : نام و نام خانوادگی. نام پدر و... و یه قسمت هم برای اپلود عکس داره چه جوری باید با ajax اطلاعاتمو ثبت کنم اگه میشه یه نمونه کد برام بزارید البته ساده باشه!!!!!:لبخند:

MostafaEs3
دوشنبه 23 بهمن 1391, 15:45 عصر
پس دوست عزیر من چه کار باید بکنم

آخه من یه فرم دارم که چند قسمت داره : نام و نام خانوادگی. نام پدر و... و یه قسمت هم برای اپلود عکس داره چه جوری باید با ajax اطلاعاتمو ثبت کنم اگه میشه یه نمونه کد برام بزارید البته ساده باشه!!!!!:لبخند:

امکانش هست چرا که نباشه !! الان پلاگین های جی کوئری خوبی هست برای آپلود فایل بصورت آجاکس ... نحوه کارشون هم اینطوریه که با توابع جاوا اسکریپت محتوای فایل رو بصورت آجاکس ارسال میکنن ... ولی بازهم بعضی از مواقع برای راحتی کار هم از آجاکس و هم از Html 5 استفاده میشه که با کشیدن فایل روی قسمت مورد نظر فایل آپلود بشه !!! اگه دقت کرده باشین وردپرس همینطوره :چشمک:

2undercover
دوشنبه 23 بهمن 1391, 15:45 عصر
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function SendData(){
$.get("get.php", { title: $('#title').val(), msg: $('#matn').val(),edame: $('#edamee').val() },
function(data){
alert(data);
});
}
</script>
</head>
<body>
<form>
<input id="title" name="title" type="text" size="20"><br />
<textarea id="matn" name="msg"></textarea><br /><br />
<textarea id="edamee" name="edame"></textarea><br /><br />
<input type="button" onclick="SendData()" value="ارسال">
</form>
</body>
</html>

ببخشید ولی منظور ایشون آپلود فایل با Ajax بود!

amin_sltny
دوشنبه 23 بهمن 1391, 15:49 عصر
امکانش هست چرا که نباشه !! الان پلاگین های جی کوئری خوبی هست برای آپلود فایل بصورت آجاکس ... نحوه کارشون هم اینطوریه که با توابع جاوا اسکریپت محتوای فایل رو بصورت آجاکس ارسال میکنن ... ولی بازهم بعضی از مواقع برای راحتی کار هم از آجاکس و هم از Html 5 استفاده میشه که با کشیدن فایل روی قسمت مورد نظر فایل آپلود بشه !!! اگه دقت کرده باشین وردپرس همینطوره :چشمک:

دوست عزیر اگه میشه یکم بیشتر توضیح بدید من دقیقا باید چه کنم اخه من یکم ناشیم و تازه دارم آجاکس وجی کوئری کار میکنم

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

MostafaEs3
دوشنبه 23 بهمن 1391, 16:00 عصر
دوست عزیر اگه میشه یکم بیشتر توضیح بدید من دقیقا باید چه کنم اخه من یکم ناشیم و تازه دارم آجاکس وجی کوئری کار میکنم

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

تقریبا نه ... البته میشه راه حلش رو سرچ کنید توی سایتهای خارجی توضیح کامل داده ... من خودم الان آموزش فارسی در دسترس ندارم ولی ajax upload رو سرچ کنید پیدا میکنید

siavashsay
دوشنبه 23 بهمن 1391, 17:21 عصر
2 تا صفحه هست + یک فایل js که ضمیمه کردم ! دانلود کن و در کنار فایل ها بذار ! یک پوشه هم به نام uploads کنار فایلها درست کن که فایلهای آپلودی داخل اون ریخته شن !
انگار پوشه شما باید حاوی اینها باشن :
form.php - upload.php - jquery.form.js - uploads
صفحه form.php

<html>
<head>
<title>Upload</title>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="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>
<div style="width:600px">

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


</div>
</body>
</html>
صفحه upload.php ( توجه کن که حتما به همین نام ذخیره کنی )

<?php
$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];

if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024) && $size>60000)
{
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");

echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}

else
echo "Please select image..!";

exit;
}
?>
حالا کافیه که عکس رو انتخاب کنی و فایل توی همون لحظه واست آپلود شه !
اگه نیازی به توضیح بود سوال کنید !
موفق باشید !

eshpilen
دوشنبه 23 بهمن 1391, 17:44 عصر
آره آپلود ایجکس هم میشه اما فکر کنم جزو HTML5 است. یعنی API اش روی مرورگرهایی که از HTML5 پشتیبانی نمیکنن وجود نداره.

yeksib
دوشنبه 23 بهمن 1391, 19:12 عصر
2 تا صفحه هست + یک فایل js که ضمیمه کردم ! دانلود کن و در کنار فایل ها بذار ! یک پوشه هم به نام uploads کنار فایلها درست کن که فایلهای آپلودی داخل اون ریخته شن !
انگار پوشه شما باید حاوی اینها باشن :
form.php - upload.php - jquery.form.js - uploads
صفحه form.php

<html>
<head>
<title>Upload</title>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="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>
<div style="width:600px">

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


</div>
</body>
</html>
صفحه upload.php ( توجه کن که حتما به همین نام ذخیره کنی )

<?php
$path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];

if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024) && $size>60000)
{
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");

echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}

else
echo "Please select image..!";

exit;
}
?>
حالا کافیه که عکس رو انتخاب کنی و فایل توی همون لحظه واست آپلود شه !
اگه نیازی به توضیح بود سوال کنید !
موفق باشید !

ببخشید ولی چطوری میشه چندتا فایل رو با هم همزمان اپلود کرد!؟

siavashsay
دوشنبه 23 بهمن 1391, 19:24 عصر
از نمونه های اماده استفاده کنید !
http://www.uploadify.com/demos/
http://blueimp.github.com/jQuery-File-Upload/
http://www.fyneworks.com/jquery/multiple-file-upload/

yeksib
دوشنبه 23 بهمن 1391, 19:40 عصر
از نمونه های اماده استفاده کنید !
http://www.uploadify.com/demos/
http://blueimp.github.com/jQuery-File-Upload/
http://www.fyneworks.com/jquery/multiple-file-upload/

اما مشکلی که هست من میخواهم موقعی که کاربر میخواهد یک رکورد ثبت کند برای ثبت یک رکورد چند تصویر بتواند ارسال کند اما وقتی از این آماده ها استفاده میکنیم باعث میشه نتونیم بررروی تعداد تصاویر آپلود شده مدیریت کرد یعنی کاربر میاد تصویرها رو ارسال میکنه سپس رکوردش ثبت میشه!
شما راهکار ی برای جلوگیری از این کار نداردید !
یعنی همزمان وقتی میخواهد رکرودش ثبت بشه فایل ها هم آپلود شده و نام هر تصویر هم در دیتابیس ذخیره شوند.

siavashsay
دوشنبه 23 بهمن 1391, 22:13 عصر
دوستان یک فایل ضمیمه کردم !
یک آپلودر توسط jqeruy هست !
در سورس فایل upload.php میتونید کوئری هم برای دیتابیس بدید !
امکانات :
- آپلود چند فایل همزمان
- اضافه کردن فیلد فایل به تعداد مورد نیاز و یا حذف آن !
موفق باشید

amin_sltny
سه شنبه 24 بهمن 1391, 08:07 صبح
دوست عزیر اگه میشه یکم در مورد کد ها توضیح بدید چون بالاخره باید بفهمیم اینا چه می کنن مثلا فایلی که ضمیمه کردید (query.form.rar‏j) مال چیه؟:متفکر:

siavashsay
سه شنبه 24 بهمن 1391, 10:38 صبح
jquery.form.js یک فایل (تابع ) آماده جاوا هست که اطلاعات فرم ها رو ( مخصوصا فایلها ) به صفحه مورد نظر میفرسته !
صفحه upload.php که مشصخه چی هست !
صفحه اصلی هم اگر توجه کنید ما یک فرم داریم که action هم داره ! اما این action توسط button خود فرم submit نمیشه ! بلکه توسط اون تابع jquery که در ابتدای صفحه نوشته شده submit میشه !
اگر به دکمه Button خود فرم توجه کنید میبینید که خاصیت None داره !
بعد از زدن دکمه اطلاعات توسط jquery به فایل upload.php فرستاده میشه و فایل ها که صورت array هستند ( در اینجا منظور این هست که هر تعداد فایل که موجود باشه ) آپلود میشه !
در صفحه آپلود هم که در صورت آپلود یک تگ html همراه با نام و آدرس فایل به صفحه اصلی فرستاده میشه که توسط jquery فراخونی میشه که به منظور نشون دادن عکسها هست !
اون کدها و توابع jquery دیگه ای هم که در ابتدای صفحه اصلی نوشته شده برای ایجاد فیلد فایل جدید به مقدار مورد نیاز و حذف اونهاست !
امیدوارم مفید بوده باشه !
باز هم اگر سوال بود در خدمتم :)
موفق باشید !

amin_sltny
سه شنبه 24 بهمن 1391, 12:34 عصر
دوست عزیر خیلی ممنونم بسیار بهم کمک کرد:تشویق::تشویق:

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

siavashsay
سه شنبه 24 بهمن 1391, 17:17 عصر
اگه میشه عکس اون صفحه رو بگذارید ببینم چطوریه ! من با وردپرس کار نکردم !

amin_sltny
چهارشنبه 25 بهمن 1391, 16:19 عصر
اگه میشه عکس اون صفحه رو بگذارید ببینم چطوریه ! من با وردپرس کار نکردم !

دوست عزیر اینم عکس!!!!!:لبخندساده:

siavashsay
چهارشنبه 25 بهمن 1391, 20:38 عصر
این از سیستم Drag and Drop استفاده میکنه !
برای عکس هم نیست ! ظاهرا برای فولدر هست !
به هر حال تو اینترنت یه جسجتو در مورد :
jquery drag and drop multi file uplload
بزنید متوجه میشید :)