ساخت آپلودر مبتنی بر Ajax

با این آموزش میخوام بهتون نشون بدم که چگونه فایلتون رو بدون دوباره سازی یا همون رفرش کل صفحه بعد از سابمیت کردن آپلود کنید.امیدوارم این مطلب جالب توجه شما باشه،اگه مایل باشید دو روش رو امتحان کنیم،یکی با استفاده از روش متداول iframes و کتابخانه های خارجی و دیگری استفاده از jQuery (که من اینو بیشتر میپسندم) :)

---

1- قدم اول -HTML
به صورت معمول ما کارمون رو با اچ تی ام ال شروع میکنیم
این صفحه اصلی ما در هر دو مثال خواهد بود:

templates/main.html

Ajax file upload into (hidden) iframe










awaiting for upload


 First example of ajax upload. Most easy one. Just choose any image and clock 'Upload' button to process. Also you can send visible or hidden extra information. In iframe I will draw result of work. Plus we have response behavior of upload result.



Ajax file upload using ajaxupload.3.6.js library



Upload button

awaiting for upload


 Another good sample. Now we will using special library - ajaxupload.3.6.js. This library from here. Both samples very interactive and useful. Try it!

۲−گام دوم-CSS
این هم سی اس اس استفاده شده در این مثال:

templates/css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}

.examples{background:#FFF;width:570px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}

.accordion h3{margin:0}

.accordion form{border:1px solid;background:#E6E6E6;border-color:#C3C3C3 #8B8B8B #8B8B8B #C3C3C3;margin:.5em 0;padding:.5em}

.accordion form label{margin-right:1em;font-weight:700;color:#900;font-size:10px}

iframe#upload_target{width:500px;height:400px;border:1px solid #ddd;float:left;display:none}

#response1,#response2{font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}

#ajxiupload2{background-color:#afe;font-size:18px;text-align:center;padding:10px;width:200px;border:1px solid #ddd;margin:10px 0}

علاوه بر این فایلهای دیگه ای هم وجود داره که نیازی نیست اینجا قرار بدم به صورت پکیج در آخر برای دانلود قرار دادم
۳−گام سوم-JS
فایهای js مورد نیاز برای این آموزش:

js/main.js

$(document).ready(function(){

 $("#accordion").accordion({autoHeight: false,navigation: true});

 //برای مثال 1

 var $oResponse1 = $("#response1");

 $("#upload_target").load(

 function() {

 var ret = frames['upload_target'].document.getElementsByTagName("div")[0].innerHTML;

 var data = eval("("+ret+")"); //parse json

 $oResponse1.text(data.html);

 }

 );

 // برای مثال 2

 var $oResponse2 = $("#response2");

 var button = $('#ajxiupload2'), interval;

 new AjaxUpload(button,{

 action: 'index.php',

 data : {

 'extra_info' : 'some extra info',

 'sample' : 2,

 },

 name: 'image',

 onSubmit : function(file, ext){

 this.disable();

 },

 onComplete: function(file, response){

 this.enable();

 var data = eval("("+response+")"); //parse json

 $oResponse2.text(data.html);

 }

 });

});

گام آخر-پی اچ پی
اینم فایل پی اچ پی مورد استفاده ما:

index.php

 

// set error reporting level

if (version_compare(phpversion(), "5.3.0", ">=") == 1)

 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);

else

 error_reporting(E_ALL & ~E_NOTICE);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

 if ((int)$_POST['sample'] == 1) {

 echo '
' . json_encode(array(

 'html' => 'uploaded',

 'code' => 1,

 )) . '
';

 echo '
';

 echo "$_POST variables:n";

 print_r($_POST);

 echo "$_FILES variables:n";

 print_r($_FILES);

 echo '
';

 exit;

 }

 if ((int)$_POST['sample'] == 2) {

 echo json_encode(array(

 'html' => 'uploaded',

 'code' => 1,

 ));

 exit;

 }

}

require_once('templates/main.html');

?>

میتونید فایلهای این آموزش رو از اینجا دانلود کنید.
امیدوارم این آموزش براتون مفید واقع شده باشه...