利用js實現無重新整理上傳頭像（或檔案）並顯示進度條
阿新 • • 發佈：2019-01-28
無重新整理上傳原理：現在我們利用新技術FormData表單資料物件可以實現快速收集表單資訊，普通表單域 和 上傳檔案域 均可以收集，再結合ajax就可以實現無重新整理上傳。
那麼怎樣顯示進度條呢？原來ajax物件有upload成員，該成員也是物件，構造器是XMLHttpRequestUpload，該upload物件本身有onprogress事件，每隔100ms就執行一次，同時會獲取當前附件的上傳情況，包括總大小，已上傳大小資訊。
下面直接貼程式碼：
(1)index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js的FormData物件快速收集表單資訊及無重新整理上傳頭像</title> <style> #pat{width:200px;height: 20px; border-radius: 5px; background-color: #ccc; margin: 10px} #son{width: 0;height: 100%; background: #9cf; text-align: center; border-radius: 5px} </style> </head> <body> <form enctype="multipart/form-data"> 使用者名稱:<input type="text" name="user"><br/> 密碼:<input type="password" name="pass"><br/> 頭像:<input type="file" name="file"><br/> <input type="submit" value="提交" name="sub"> </form> <div id="showResult" style="display: none"> <p>ajax無重新整理介面返回結果：</p> 使用者名稱：<input type="text" id="user" disabled="disabled"><br/> 密碼：<input type="text" id="pass" disabled="disabled"><br/> 頭像：<img src="" id="face" style="width:200px;height:200px"> <div id="pat"><div id="son"></div></div> </div> <script type="text/javascript"> var fm=document.getElementsByTagName('form')[0]; fm.onsubmit=function () { //例項化 FormData物件，同時收集表單的資訊，包括普通表單域和檔案表單域的資訊 var fd=new FormData(fm); var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function () { if(xhr.readyState==4){ eval("var info="+xhr.responseText); //將json資訊轉化成js物件 var result=document.getElementById("showResult"), user=document.getElementById("user"), pass=document.getElementById("pass"), face=document.getElementById("face"); result.style.display='block'; user.value=info.user; pass.value=info.pass; face.setAttribute("src",info.face); } }; xhr.upload.onprogress=function (evt) { //事件監聽器，獲取上傳的情況 var loaded=evt.loaded, //已上傳的大小 total=evt.total, //總大小 per=Math.floor((loaded/total)*100)+'%', //轉換成百分比 son=document.getElementById("son"); son.innerHTML=per; son.style.width=per; } xhr.open('post','./upload.php'); xhr.send(fd); //傳送資料 return false; //阻止頁面提交 } </script> </body> </html>
(2)upload.php
我們還得在同級目錄下建立一個face資料夾，來儲存上傳的檔案。<?php $user=$_POST['user']; $pass=$_POST['pass']; $file=$_FILES['file']; foreach ($file as $key => $value) { $$key=$value; } $path='face/'.time().strtolower(strstr($name, '.')); //修改上傳檔案的名稱,strstr($name, '.')是獲取字尾名 move_uploaded_file($tmp_name,$path); $path=strstr($path,$path[0]); //圖片的儲存地址 $arr=array( "user"=>$user, "pass"=>$pass, "face"=>$path ); $json=json_encode($arr); //json編碼 echo $json; ?>
點選提交前效果如下：
當我點選提交，就會顯示下面效果：
怎麼樣？酷炫吧~~~
如果要無重新整理上傳多張圖片，那該怎麼做呢？？
很簡單，只要將這多張圖片一張一張上傳，最後返回這些圖片的伺服器最終儲存地址就行啦！