آپلود چندگانه فایل توسط php , jquery و Ajax

قصد داریم یک سیستم با آپلود چندگانه فایل توسط php را بدون اینکه صفحه ریفرش شود را پیاده سازی کنیم .

با استفاده از اسکریپتی که آماده کردیم می توانید همه عکس ها را یکجا بدون بارگذاری مجدد صفحه (Refresh) توسط php , jquery و Ajax آپلود کنید.

به شما دو روش برای نمایش عکس بعد از آپلود را نشان می دهیم . بار اول که عکس توسط جی کویری داخل سرور آپلود شد , می توانید عکس را بدون آنکه در فولدر ذخیره شود.

این اسکریپت بسیار کوتاه , آسان و پرکاربرد است که می توانید به راحتی در پروژه های تحت وب خود پیاده سازی کنید .

راهنمای قدم به قدم زیر را کامل بخوانید تا درک کلی از کل فرایند آپلود چندگانه فایل توسط php , jquery و Ajax داشته باشید.

فایل index.html

فایل index.html شامل کد های جاواسکریپت و html می باشید . که همه ی کد ها در اینجا قرار دیدم . کد جاواسکریپت : اول از همه دو کتابخانه jquery.min.js و jquery,form.js را در صفحه فراخوانی می کنیم. Jquery.min.js کتابخانه اصلی خود جی کویری است و jquery.form.js نیز برای submit فرم برای آپلود فایل ها توسط جی کویری ajax است.

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

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

حالا کد جاواسکریپت برای ارسال فرم و نمایش تصاویر آپلود شده می نویسیم.

<script type="text/javascript">
$(document).ready(function(){
    $('#images').on('change',function(){
        $('#multiple_upload_form').ajaxForm({
            //display the uploaded images
            target:'#images_preview',
            beforeSubmit:function(e){
                $('.uploading').show();
            },
            success:function(e){
                $('.uploading').hide();
            },
            error:function(e){
            }
        }).submit();
    });
});
</script>

$(document).ready(function(){

$('#images').on('change',function(){

$('#multiple_upload_form').ajaxForm({

//display the uploaded images

target:'#images_preview',

beforeSubmit:function(e){

$('.uploading').show();

success:function(e){

$('.uploading').hide();

error:function(e){

}

}).submit();

});

</script>

کد html مقدار مشخصه name ورودی فایل input به صورت آرایه تعریف شده تا بتواند اسم چندگانه فایل ها را ذخیره کند و همچنین مشخصه multiple برای آپلود چندگانه استفاده شده است.

<form method="post" name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
    <input type="hidden" name="image_form_submit" value="1"/>
    <label>Choose Image</label>
    <input type="file" name="images[]" id="images" multiple >
    <div class="uploading none">
        <label>&nbsp;</label>
        <img src="uploading.gif" alt="uploading......"/>
    </div>
</form>

<label>Choose Image</label>

</div>

</form>

یک div با id ی که در کد جاواسکریپت بالا تعریف شده است می سازیم . عکس آپلود شده در این تگ div نمایش خواهد داد . می توانید id تگ div را تغییر بدید ولی به خاطر داشته باشید باید مقدار (target:’#images_preview’) با آی دی که تعریف کردید یکسان باشد.

<div id="images_preview"></div>

1	<div id="images_preview"></div>

فایل upload.php

فایل upload.phpشامل کدهایی برای فرایند آپلود و پیش نمایش عکس است . دو راه برای آپلود و نمایش عکس وجود دارد روش اول ساخت فولدری با اسم uploads/ است . آپلود عکس و ذخیره در فولدر .

<?php
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        //upload and stored images
        $target_dir = "uploads/";
        $target_file = $target_dir.$_FILES['images']['name'][$key];
        if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
            $images_arr[] = $target_file;
        }
    }
?>

<?php

$images_arr = array();

foreach($_FILES['images']['name'] as $key=>$val){

//upload and stored images

$target_dir = "uploads/";

$target_file = $target_dir.$_FILES['images']['name'][$key];

if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){

$images_arr[] = $target_file;

}

روش دوم می توانید بدون آنکه فایل عکس در جایی ذخیره شود نمایش دهید.

<?php
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        //display images without stored
        $extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
        $images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
    }
?>

<?php

$images_arr = array();

foreach($_FILES['images']['name'] as $key=>$val){

//display images without stored

$extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);

$images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));

}

ساخت پیش نمایش تصویر

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

<?php
if(!empty($images_arr)){ 
    foreach($images_arr as $image_src){ ?>
        <ul>
            <li >
                <img src="<?php echo $image_src; ?>" alt="">
            </li>
        </ul>
<?php }
}
?>

<?php

if(!empty($images_arr)){

foreach($images_arr as $image_src){ ?>

<ul>

<li >

</li>

</ul>

<?php }

}

جمع بندی

این آموزش و اسکریپت به شما کمک می کند که آپلود چندگانه فایل توسط php , jquery و Ajax داشته باشید . آپلود پیشرفته عکس مثل drag & drop (کشیدن و رها کردن) را در مقالات بعدی خواهیم دید . پس با عضویت در خبرنامه زودتر از مقالات سایت با خبر شوید . موفق باشید

لغو پاسخ

amineslami ۱۸ شهریور ۱۳۹۹

بسیار عالی ممنون

پاسخ
پوریا ۱۷ شهریور ۱۳۹۹

با سلام
تشکر بابت این آموزش و همچنین دیگر آموزش های مفیدتون.
جناب شفیعی اگر امکانش هست لطفا سورس کد این بخش رو برای دانلود ارائه بفرمایید، چون این مطلب بخش باکس دانلود نداره.
باتشکر

پاسخ

حسن شفیعی ۱۷ شهریور ۱۳۹۹

سلام. خوشحالیم ک مفید واقع شده.
سورس اضافه شد.
موفق باشید.

پاسخ

رها ۶ آذر ۱۳۹۷

با سلام.من نیاز ب یادگیری اپلود فایل با ajax رو دارم با اینکه با کامپیوتر اشنایی دارم ولی هیچی از این اموزش اپلود فایل ها در گوگل متوجه نشدم. من الان چیکار کنم ؟
اموزش دیگه ای وجود نداره من تا حالا فایلی رو اپلود نکردم و اشنایی هم ندارم

پاسخ

حسن شفیعی ۷ آذر ۱۳۹۷

سلام. می توانید لینک های زیر را به ترتیب مطالعه کنید
https://netparadis.com/upload-file-php/
https://netparadis.com/php-ajax-image-upload/

موفق باشید.

پاسخ

سعید ۱۶ مهر ۱۳۹۷

سلام اقا این کتابخانه ها که فراخوانی کردید لینک دانلودشون رو میذارید

پاسخ

حسن شفیعی ۱۶ مهر ۱۳۹۷

سلام. تماما داخل سورس کاملی که در بخش “باکس دانلود” قرار دادیم وجود داره .
موفق باشید.

پاسخ

arefmohajerrad ۱۲ آبان ۱۳۹۶

سلام مهندس
میخام یه متغیر جاوا اسکریپتی رو به متغیر php تبدیل کنم باajax
کمک کنین ممنون میشم

پاسخ

حسن شفیعی ۱۲ آبان ۱۳۹۶

سلام .
اگر قصد دارید مقدار یک متغییر جاواسکریپت رو با ajax به صفحه php ارسال کنید به سادگی میتونید به اینصورت هستش
var id=12; $.ajax({ method:'post', url:"upload.php", data:{fileid:id} );
در صفحه php این مقدار رو به اینصورت دریافت می کنیم
$fileid = $_POST['fileid'];
اگر منظورتون این نبود لطفا یکم دقیقتر بگید تا بهتر راهنمایی کنم
موفق باشید

پاسخ

پونه ۱۶ مرداد ۱۳۹۷

سلام
میشه بپرسم چرا مقدار $_post رو فالس برمیگردونه در صورتی که ما درون اون فایل اپلود میکنیم؟
و ی سوال دیگه فقط این نوع تایپ در input ها این خاصیت رو داره؟ چون من نوع text رو امتحان کردم true برمیگردونه

پاسخ
حسن شفیعی ۱۷ مرداد ۱۳۹۷

سلام . فایل های آپلود شده از طریق $_FILES قابل دسترسه و با $_POST میتونید مقادیر فیلدهای دیگه رو دریافت کنید.

موفق باشید.

پاسخ

آپلود چندگانه فایل توسط php , jquery و Ajax

فایل index.html

فایل upload.php

ساخت پیش نمایش تصویر

جمع بندی

دانـلود باکــس

ساخت لیست todo با php

UnZip فایل zip با PHP (اکسترکت)

آپلود عکس با Ajax در جی کویری با نوار پیشرفت

آپلود فایل با کشیدن و رها کردن در jQuery

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه