ایجاد متن های متحرک در صفحه HTML
ایجاد متن های متحرک در صفحه HTML
09/12/1395
مدل رنگ HSL
مدل رنگ HSL
12/12/1395
نمایش همه

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

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

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

برای آنکه فیلد درج فایل را با استفاده از jQuery And PHP اضافه کرده و یا حذف کنید، باید مراحل زیر را بخوانید . در ابتدا یک فایل HTML ایجاد کرده و همینطور یک فایل برای upload عکس ایجاد کنید. قایل css برای ساختن استایل داشته باشید و در مرحله اول یک فایل HTML بسازید که در اینجا فایل را ساخته و به اسم file.html ذخیره کردیم. در این مقاله شما آموزش افزودن و حذف فیلد درج فایل با jQuery And PHP را فرامیگیرید. انجام اینکار ها قبل از طراحی سایت صورت میگیرد.

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

<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 id=’menu_div’>

<div id=”form_div”>
<form method=”post” action=”upload_file.php” id=”file_form” enctype=”multipart/form-data”>
<div id=”file_div”>
<div>
<input type=”file” name=”file[]”>
<input type=”button” onclick=”add_file();” value=”ADD MORE”>
</div>
</div>
<input type=”submit” name=”submit_file” value=”SUBMIT”>
</form>
</div>

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

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

حالا یک فرم برای upload فایل و اضافه کردن فیلد فایل که در شروع کار ساخته اید و دکمه add more را برای اضافه کردن به تعداد فیلدهای فایل که در نظر گرفته شده تابع آن را به اسم  add_file() برای ساختن تگ های div که دارای فیلدهای فایل ساخته شده است و دکمه حذف در  file_div به همراه تابع remove_file() برای پاک کردن فیل فایل بعد از کلیک کردن کاربر روی دکمه حذف خواهد بود. برای ساختن فایل php برای upload کردن قایل ها آن را با اسم 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]);
}
}
?>

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

حالا یک آرایه فایل ساخته ایم و کلیه فایل هایی که در آرایه با یک حلقه در پوشه مورد نظر میباشد را upload کردیم. حالا برای ساختن یک css برای اضافخ کردن 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;
}