افزودن و حذف فیلد درج فایل به کمک jQuery And PHP

در این آموزش ما به شما نشان خواهیم داد که چگونه با کلیک روی یک دکمه به تعداد دلخواه file fields داشته باشید و چگونه از PHP برای آپلود فایل های خود استفاده کنید . لازم به یاداوری نیست که ما در این آموزش از تکنیک های jQuery و PHP استفاده خواهیم کرد.

افزودن و حذف فیلد درج فایل به کمک jQuery And PHP

برای انجام افزودن و حذف فیلد فایل تنها سه گام لازم است:
1. یک فایل HTMl بسازید
2. یک فایل PHP برای آپلود عکس بسازید
3. یک فایل CSS برای ایجاد استایل بسازید.
گام 1. یک فایل HTML بسازید.
ما اینجا این فایل را ساخته و به نام file.html ذخیره کرده ایم

<html>
<head>
<link href="file_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function add_file()
{
$("#file_div").append("<div><input type='file' name='file[]'><input type='button' value='REMOVE' onclick=remove_file(this);></div>");
}
function remove_file(ele)
{
$(ele).parent().remove();
}
</script>
</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

ما در این گام یک فرم برای آپلود فایل و افزون فیلد فایل در شروع کار ایجاد کرده ام . و دکمه add more را برای افزودن به تعداد فیلد های فایل در صورت نیاز در نظر گرفته ایم فانکشن آن به نام add_file() برای ایجاد تگ های div حاوی فیلدهای فایل ایجاد شده است و دکمه حذف در file_div با فانکشن remove_file() برای حذف فیلد فایل پس از کلیک کاربر روی دکمه حذف خواهد بود.
گام 2. ایجاد فایل PHP برای آپلود فایلها
ما یک فایل PHP برای آپلود فایل ها ایجاد و آن را با نام upload_file.php ذخیره کرده ایم کد های زیر را ببینید.

<?php
if(isset($_POST['submit_file']))
{
for($i=0;$i<count($_FILES["file"]["name"]);$i++)
{
$uploadfile=$_FILES["file"]["tmp_name"][$i];
$folder="files/";
move_uploaded_file($_FILES["file"]["tmp_name"][$i], "$folder".$_FILES["file"]["name"][$i]);
}
}
?>

ما در این گام یک آرایه فایل ایجاد کردیم و تمام فایل های موجود در آرایه را با یک حلقه در پوشه مورد نظر آپلود کرده ایم.
گام 3.ایجاد یک CSS برای افزودن استایل ها .
ما یک فایل CSS ایجاد و با نام file_style.css ذخیره کرده ایم.به کدهای زیر نگاه کنید.

body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#ECF0F1;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:50px;
font-size:45px;
color:#626567;
}
#wrapper h1 p
{
font-size:18px;
}
#file_div
{
width:360px;
padding:20px;
margin-left:300px;
background-color:white;
margin-bottom:20px;
}
#file_div input[type="file"]
{
margin-top:10px;
}
#file_div input[type="button"]
{
background-color:#424242;
border:none;
width:110px;
height:35px;
color:white;
border-radius:3px;
}
#file_form input[type="submit"]
{
background-color:#424242;
border:none;
width:110px;
height:35px;
color:white;
border-radius:3px;
}