گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1395/07/28 - 09:56
كد :7233
اگر با سی پنل کار کرده باشید حتما متوجه شده اید که وقتی فایل حجیمی را به وبسایت خود لود می کنید در گوشه سمت راست یک نوار وضعیت لود شدن فایل را نشان می دهد و وقتی فایل لود شد اعلام پایان می دهد.
برای داشتن این نوار در سایت خود به تمرین زیر مراجعه کنید . کد ها شامل نحوه آپلود فایل هم هستند.
آپلود فایل با نوار بار لود شدن فایل به کمک Jquery و Php
نوار بار لود شدن (نوار پیش رونده) برای نمایش لود شدن بارگذاری فایل استفاده می شود. این نوار به کاربران امکان می دهد زمان لود شدن فایل خود را ببینند و نوار بار بسیار پر کاربرد است . در این آموزش ما یک نوار لود شدن فایل برای آپولود را به کمک jquery و PHP آموزش خواهیم داد .
محل درج عکس progress_bar
برای ایجاد آپلود فایل همراه نوار بار لود شدن تنها چهار گام زیر لازم است:
1.ساخت یک html برای نوشتن کد های وب برای آپلود فایل
2. ساخت یک فایل javascript برای نوشتن کد های اسکریپت لازم برای نوار لود شدن
3. ساخت یک فایل php برای آپلود عکس
4. ساخت یک فایل css برای نوشتن کد های استایل نوار بار لود شدن.
گام 1. ایجاد یک فایل html و نوشتن کد های وب لازم برای آپلود فایل
ما این فایل را به نام fileupload.html ایجاد و ذخیره می کنیم.
<html>
<head>
<link rel="stylesheet" type="text/css" href="progress_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="upload_progress.js"></script>
</head>
<body>
<form action="upload_file.php"id="myForm" name="frmupload" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file" />
<input type="submit" name='submit_image' value="Submit Comment" onclick='upload_image();'/>
</form>
<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'>0%</div>
</div>
<div id='output_image'>
</body>
</html>
در این گام ما یک فرم برای آپلود فایل و درج تمام فایل های لازم ایجاد کرده ام اما شما لازم است که jQuery و jQuery Form Plugin را دانلود کنید.
محل درج لینک آدرس دو فایل در سایت.
گام 2. ایجاد فایل جاوا اسکریپت
ما این فایل را با نام upload_progress.js ایجاد و ذخیره کرده ایم :
function upload_image()
{
var bar = $('#bar');
var percent = $('#percent');
$('#myForm').ajaxForm({
beforeSubmit: function() {
document.getElementById("progress_div").style.display="block";
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
if(xhr.responseText)
{
document.getElementById("output_image").innerHTML=xhr.responseText;
}
}
});
}
در این گام ما از فرم ajax برای آپلود و نمایش نوار آپلود استفاده کرده ایم پلاگین فرم jquery توابع از پیش تعریف شده ای برای آپلود و نمایش نوار آپلود دارد . در اولین تابع ما عرض نوار را با مقدار اولیه % مقدار دهی کرده ایم و به آن یک استایل اختصاص داده ایم در تابع دوم با مقدار درصد را افزایش داده ایم تا فایل آرام آرام آپلود شود در تابع سوم اگر فایل بطور کامل آپلود شد و هیچ خطایی رخ نداد ما عرض نوار آپلود را به 100% میرسانیم . در تابع چهارم اگر فایل به طور کامل آپلود شد و هیچ ایرادی پیش نیامد فایل را نمایش می دهد .
گام 3. ایجاد فایلphp برای آپلود فایل
ما یک فایل php به نام upload_file.php ایجاد و ذخیره کرده ایم :
if(isset($_POST['submit_image']))
{
$uploadfile=$_FILES["upload_file"]["tmp_name"];
$folder="images/";
move_uploaded_file($_FILES["upload_file"]["tmp_name"], $folder.$_FILES["upload_file"]["name"]);
echo '<img src="'.$folder."".$_FILES["upload_file"]["name"].'">';
exit();
}
در این گام ما فایل را دریافت و آن را در پوشه آپلود می کنیم و فایل را به جاوا اسکریپت قسمت فایل های آپلود شده می فرستیم تا نمایش داده شود در اینجا انتضار ما تنها آپلود فایل ها عکس است شما می توانید به میزان نیاز خود عملیات آپلود فایل را سفارشی کنید.
گام 4 .ایجاد یک فایل css
ما فایل رابه نام progress_style.css. ایجاد و ذخیره کرده ایم.
body
{
padding: 30px
}
form
{
display: block;
margin: 20px auto;
background: #eee;
border-radius: 10px;
padding: 15px
}
.progress
{
display:none;
position:relative;
width:400px;
border: 1px solid #ddd;
padding: 1px;
border-radius: 3px;
}
.bar
{
background-color: #B4F5B4;
width:0%;
height:20px;
border-radius: 3px;
}
.percent
{
position:absolute;
display:inline-block;
top:3px;
left:48%;
}
و بدین ترتیب کار ما به پایان رسیده است در آموزش های بعدی نحوه کنترل سایز و جزیئات تصاویر برای دادن مجوز آپلود را خواهیم آموخت.