Phip Bar နှင့်အတူ AJAX ဖိုင်တင်ခြင်း function ကိုဘယ်လိုအကောင်အထည်ဖော်မလဲ။

1 ။ နိဒါန်း

မျက်မှောက်ခေတ် web application များတွင်ဖိုင်တင်ခြင်းသည်ဘုံလိုအပ်ချက်တစ်ခုဖြစ်သည်။ အသုံးပြုသူများသည်ဖိုင်ကိုဖိုင်တင်ခြင်းမပြုဘဲဖိုင်တင်ခြင်းကိုဖြည့်စွက်နိုင်သည်။ ကြာမြင့်စွာစောင့်ဆိုင်းခြင်းကြောင့်မသေချာမရေရာမှုများကြောင့်မသေချာမရေရာမှုများမှရှောင်ရှားရန်တိုးတက်မှုဘားမှတစ်ဆင့်အပ်ချောင်းကိုကြည့်ရှုနိုင်သည်။

2 ။ အကောင်အထည်ဖော်မှုနိယာမ

Ajax ဖိုင်တင်ခြင်းလုပ်ငန်းကို progroad bar ဖြင့်အကောင်အထည်ဖော်ရန်အောက်ပါအဆင့်များကိုများသောအားဖြင့်လိုအပ်သည်။

2.1 upload ပုံစံကိုဖန်တီးပါ

ပထမ ဦး စွာကျွန်ုပ်တို့သည်ဖိုင်တင်ခြင်း function ပါ 0 င်သည့် HTML ပုံစံတစ်ခုကိုဖန်တီးရန်လိုအပ်သည်။ File Upload function ကိုပုံစံ၏ encytype ကို "marttart / form-data" သို့သတ်မှတ်ခြင်းဖြင့်ထောက်ပံ့သည်။

 
  <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="file" id="file">
      <input type="submit" value="တင်ပါ">
  </form>
  

2.2 Ajax ကို အသုံးပြု. ဖိုင်များကိုပို့ပါ

နောက်တစ်ခုက Ajax ကို asynchronously ဖိုင်တွေတင်ပြဖို့ငါတို့သုံးတယ်။ javascript မှတစ်ဆင့်အသုံးပြုသူမှရွေးချယ်ထားသောဖိုင်ကိုရယူပါ။ Formdata Oblat ကို အသုံးပြု. Form Data ကိုတည်ဆောက်ရန်နှင့် XMLHTTHEQUEST OFF မှတစ်ဆင့်ဆာဗာသို့ပို့ပါ။

ဤတွင်အကောင်အထည်ဖော်သည့် JavaScript ကုဒ်၏ဥပမာတစ်ခုဖြစ်သည်။

 
  var fileInput = document.getElementById("file");
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      console.log("တင်ပါ进度：" + percent + "%");
  });
  
  xhr.send(formData);
  

2.3 server-side အပြောင်းအလဲနဲ့

ဆာဗာသည်တင်ထားသောဖိုင်များကိုလက်ခံရရှိရန်နှင့်လုပ်ဆောင်ရန်လိုအပ်သည်။ PHP တွင်, တင်ထားသောဖိုင်ကိုသတ်မှတ်ထားသော directory သို့သိမ်းဆည်းရန်အောက်ပါကုဒ်ကိုသုံးနိုင်သည်။

 
  <?php
  $targetDir = "uploads/";
  $targetFile = $targetDir . basename($_FILES["file"]["name"]);
  
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
      echo "文件တင်ပါ成功！";
  } else {
      echo "文件တင်ပါ失败！";
  }
  ?>
  

3 ။ တိုးတက်မှုဘားထည့်ပါ

အသုံးပြုသူများအား File Upload ၏တိုးတက်မှုကိုရှင်းရှင်းလင်းလင်းမြင်တွေ့နိုင်ရန်အတွက် XMLHTTPREET ၏တိုးတက်မှုဖြစ်ရပ်ကို Upload တိုးတက်မှုအတွက်နားထောင်ရန် JavaScript တွင်တိုးတက်မှုဖြစ်ရပ်ကိုသုံးနိုင်သည်။ ဒီဖြစ်ရပ်ကနေတဆင့်, ရှေ့တန်းစာမျက်နှာရှိတိုးတက်မှု bar status ကို update လုပ်နိုင်ပါတယ်။

ဒီနေရာမှာတိုးတက်မှုဘားကို update လုပ်ဖို့ကုဒ်ပါ။

 
  xhr.upload.addEventListener("progress", function(e) {
      var percent = Math.round((e.loaded / e.total) * 100);
      var progressBar = document.getElementById("progressBar");
      progressBar.style.width = percent + "%";
  });
  

အထက်ပါကုဒ်များမှတစ်ဆင့်ကျွန်ုပ်တို့သည်တိုးတက်မှုဘား၏အကျယ်ကို upload လုပ်ထုံးလုပ်နည်းအတိုင်း update လုပ်ပြီး,

4 ။ အကျဉ်းချုပ်

အထက်ပါအဆင့်များမှတစ်ဆင့်ကျွန်ုပ်တို့သည်တိုးတက်မှုဘားနှင့်အတူ Ajax ဖိုင်တင်ခြင်းလုပ်ငန်းကိုအောင်မြင်စွာအကောင်အထည်ဖော်နိုင်ခဲ့သည်။ အသုံးပြုသူများသည်ဖိုင်များကို upload ပြုလုပ်သောအခါသူတို့သည်အချိန်နှင့်တပြေးညီတိုးတက်မှုများကိုသာတွေ့နိုင်ရုံသာမကအတွေ့အကြုံများကိုနှစ်သက်ကြသည်။ ဤလုပ်ဆောင်မှုကိုအကောင်အထည်ဖော်ခြင်းတွင်ရှေ့ဆုံး Ajax Technology နှင့် Back-end php file upload လုပ်ခြင်းပါဝင်သည်။ ဤအဆင့်များဖြင့်တိုးတက်မှုဘားနှင့်အတူဖိုင်တင်ခြင်း function ကိုအလွယ်တကူတည်ဆောက်နိုင်သည်။

AJAX ဖိုင်တင်ခြင်းသည်ရှေ့နှင့်နောက်ဆက်တွဲအကြားပူးပေါင်းဆောင်ရွက်မှုလိုအပ်သော်လည်းခြေလှမ်းတစ်ခုစီ၏တိကျသောအကောင်အထည်ဖော်မှုကိုနားလည်ခြင်းအားဖြင့်,