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

---

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

templates/main.html

Ajax file upload into (hidden) iframe


                
                

                
                
            

            show 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});

    //برای مثال  ۱
    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);
        }
    );

    // برای مثال ۲
    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

 

=") == 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');

?>

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

امیدوارم این آموزش براتون مفید واقع شده باشه…