Smiley face

Google

در فروشگاه اينترنتي داتيس   در كل اينترنت

تقويم و مناسبتها

رهگيري مرسولات پستي

كاربرگرامي شما مي توانيد پس از دريافت باركد پســتي از طريق دكمه رهگيري سفارشـات ، بوسيله دكمه رهگيري مرسوله پستي ، مرسـوله خود را از طريق وب سايت اداره پســت رديابي نماييد.

Datissoftware

Datissoftware

نماد ها

logo-samandehi

عناوين علمي و آموزشي

مطالب جديد

نرم افزارهاي مورد نياز

IDM دانلود Internet Download Manager
Chrome دانلود Google Chrome
Firefox دانلود Mozilla Firefox
Winrar دانلود Winrar
FlashPlayer دانلود Flash Player
Adobe Reader دانلود Adobe Reader
Mp4 Codec دانلود Mp4 Codec

آمار و اطلاعات

جهت عضــويت در خبرنامه فروشــگاه اينترنتي داتيــس ايميل صحيح خود را وارد نماييد.

عنوان : نوار پیشرفت بارگذاری فایل با استفاده از jQuery و PHP

1396/11/07 - 14:36:22
File Upload Progress Bar Using jQuery And PHP


نوار پیشرفت بارگذاری فایل با استفاده از jQuery و PHP

File Upload Progress Bar Using jQuery And PHP

 

نوار پیشرفت برای نشان دادن پیشرفت فرآیند آپلود فایل مورد استفاده قرار می گیرد.این به طور گسترده ای در روند آپلود فایل مورد استفاده قرار می گیرد، فقط برای نشان دادن پیشرفت آپلود فایلبه كاربر. در این آموزش ما نوار پیشرفت فایل آپلود را با استفاده از jquery و php نشان می دهيم. همچنین مانند کشیدن و رها کردن آپلود عکس با استفاده از jQuery.


See Demo

File Upload Progress Bar

برای ایجاد نوار پیشرفت بارگذاری فایل، تنها چهار مرحله انجام می شود:

     یک فایل HTML ایجاد کنید و علامت گذاری را برای آپلود فایل تعریف کنید
     یک فایل جاوا اسکریپت ایجاد کنید و اسکریپت را برای نوار پیشرفت تعریف کنید
     یک فایل پی اچ پی برای آپلود تصویر ایجاد کنید
     یک فایل CSS ایجاد کنید و یک ظاهر را برای نوار پیشرفت تعریف کنید


مرحله 1. یک فایل HTML ایجاد کنید و علامت گذاری را برای آپلود فایل تعریف کنید.
ما یک فایل 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>

در این مرحله ما یک فرم برای آپلود فایل و ضمیمه کردن تمام فایل های لازم را ایجاد می کنیم اما قبل از اینکه بیشتر ادامه دهید باید جی کوئری و پلاگین جی کوئری را دانلود کنید.

 

مرحله 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;
      }
    }
  }); 
}

در این مرحله ما از ajaxForm برای آپلود و نمایش نوار پیشرفت استفاده می کنیم. jQuery Form Plugin دارای توابع از پیش تعریف شده برای بارگذاری و نمایش نوار پیشرفت است. در اولین تابع ما عرض پیشرفت نوار و درصد٪ را راه اندازی می کنیم و در حالت دوم تنظیم می کنیم. ٪ و عرض بار به عنوان فایل آپلود slowly slowly.In عملکرد سوم اگر با آپلود فایل با موفقیت، سپس٪ 100 را تنظیم کنید و عرض نوار را افزایش دهید. در تابع چهارم اگر تمام فایل آپلود فایل بدون هیچ خطایی کامل شود، آن را نمایش می دهد.

 

مرحله 3. یک فایل پی اچ پی برای آپلود تصویر
ما یک فایل 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 ایجاد کنید و یک ظاهر را برای نوار پیشرفت تعریف کنید.
ما یک فایل 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%; 
}

در اين آموزش، چگونگی ایجاد نوار پیشرفت بارگذاری فایل با استفاده از jQuery و PHP به سادگي فرا گرفتيد.

قبل از آپلود با استفاده از آموزش جی کوئری میتوانید نوع و اندازه  فایلها را بررسي و تأیید کنید.

1396/11/07 - 14:36:22
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي