原生JS上傳大文件顯示進度條 php上傳文件代碼

更新時間：2020年03月27日 16:53:34 作者：大智如蠢

這篇文章主要為大家詳細介紹了JS原生上傳大文件顯示進度條，php上傳文件關鍵代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JS原生上傳大文件顯示進度條，php上傳文件，供大家參考，具體內(nèi)容如下

在php.ini修改需要的大小：

upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M

<!DOCTYPE html>
<html>
<head>
 <title>原生JS大文件顯示進度條</title>
 <meta charset="UTF-8">
 <style type="text/css">
 #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
 #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
 </style>
 <script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 </script>
</head>
<body>
 <form action="" method="post">
 <div id="parent">
  <div id="child"></div>
 </div>
 <p>上傳文件:<input type="file" name="file"></p> 
 <p><input type="submit" value="提交" id="submit"></p>
 </form>
 <script type="text/javascript">
 var oForm = document.getElementsByTagName('form')[0];
 var oSubmit = $('submit');
 //如果多個人同時提交這個表單的時候，由于是異步的請求，互不影響
 oSubmit.onclick = function(){
  try{
  var xhr = new XMLHttpRequest();
  }catch(e){
  var xhr = new ActiveXObject("Msxml2.XMLHTTP");
  }
  xhr.upload.onprogress = function(e){
  var ev = e || window.event;
  var percent = Math.floor((ev.loaded / ev.total)*100); 
  // console.log(percent);
  //將百分比顯示到進度條
  $('parent').style.display = 'block';
  $('child').style.display = 'block';
  //將上傳進度的百分比顯示到child里面
  $('child').style.width = percent+'%';
  $('child').style.textAlign = 'center';
  $('child').innerHTML = percent+'%';
  //判斷如果百分比到達100%時候，隱藏掉
  if(percent==100){
   $('parent').style.display = 'none';
   $('child').style.display = 'none';
  }
  }
  xhr.open('post','progress.php',true);
  var form = new FormData(oForm);
  xhr.send(form);
  xhr.onreadystatechange = function(){
  if(xhr.readyState==4 && xhr.status==200){
   eval("var obj ="+xhr.responseText);
   if(obj.status){
   alert('上傳成功');
   }else{
   alert('上傳失敗');
   }
  }
  }
  //阻止表單提交
  return false;
 }
 </script>
</body>
</html>

<?php
 //開始上傳
 //注意：文件是windows系統(tǒng)的文件，采用的gbk編碼，php文件使用的是utf-8編碼
 //我們不能直接修改文件的編碼，只能臨時修改一下php的編碼
 $dst_file = $_FILES['file']['name'];
 $dst_file = iconv('utf-8', 'gbk', $dst_file);
 if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
 $data['status'] = 1;
 }else{
 $data['status'] = 0;
 }
 echo json_encode($data);

更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: