原生JS上傳大文件顯示進(jìn)度條php上傳文件代碼

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

10年積累的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有古浪免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

原生JS上傳大文件顯示進(jìn)度條 php上傳文件代碼

在php.ini修改需要的大?。?/p>

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

<!DOCTYPE html>
<html>
<head>
 <title>原生JS大文件顯示進(jìn)度條</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');
 //如果多個(gè)人同時(shí)提交這個(gè)表單的時(shí)候，由于是異步的請(qǐng)求，互不影響
 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);
  //將百分比顯示到進(jìn)度條
  $('parent').style.display = 'block';
  $('child').style.display = 'block';
  //將上傳進(jìn)度的百分比顯示到child里面
  $('child').style.width = percent+'%';
  $('child').style.textAlign = 'center';
  $('child').innerHTML = percent+'%';
  //判斷如果百分比到達(dá)100%時(shí)候，隱藏掉
  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
 //開(kāi)始上傳
 //注意：文件是windows系統(tǒng)的文件，采用的gbk編碼，php文件使用的是utf-8編碼
 //我們不能直接修改文件的編碼，只能臨時(shí)修改一下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)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：原生JS上傳大文件顯示進(jìn)度條php上傳文件代碼
文章轉(zhuǎn)載：http://chinadenli.net/article12/ppcidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App開(kāi)發(fā)、標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

原生JS上傳大文件顯示進(jìn)度條php上傳文件代碼