【web】js新增附件功能（顯示進度條）——新增附件-demo01
阿新 • • 發佈：2019-02-04
使用input元素新增附件（顯示進度條）
備註：此專案沒有實現上傳附件的功能
專案成品圖：
執行的狀態：
點選上傳的狀態：
以下是專案原始碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus" /> <meta name="Author" content="" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <style type="text/css"> .spa{ font-size:12px; color:#0066ff; } .put{ font-size:12px; font-family:Arial; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none; } .put2{ font-size:12px; color:#0066ff; text-align:center; border-width:medium; border-style:none; } </style> </head> <body> <div id="up"> <span class="spa">載入中,請稍等...</span> <input id="chart" type="text" size="54" class="put" readonly="" /> <input id="percent" type="text" size="20" class="put2" readonly="" /> </div> <div id="ff"> <form name="upload" method="post" action=""> <input type="file" id="f" size="30" /> <input type="button" id="b" value="上傳" onclick="count()" /> </form> </div> <script language="javascript"> var bar=0; var line="||"; var amount=""; document.getElementById("up").style.display="none"; function count(){ var f = document.getElementById("f"); var b = document.getElementById("b"); b.disabled = true; f.disabled = true; if(f.value==""){ b.disabled = false; f.disabled = false; alert("請新增上傳檔案"); return false; } document.getElementById("up").style.display="inline"; bar = bar+2; amount = amount+line; document.getElementById("chart").value=amount; document.getElementById("percent").value=bar+"%"; if(bar<99){ setTimeout("count()",200); }else{ b.disabled = false; f.disabled = false; alert("載入完畢！"); document.getElementById("up").style.display="none"; // window.location=""; } } </script> </body> </html>
分析：
第24行：是選擇附件的核心<input type="file" id="f" size="30" />進度條部分：
25行：
<input type="button" id="b" value="上傳" onclick="count()" />28-59行：
<script language="javascript"> var bar=0; var line="||"; var amount=""; document.getElementById("up").style.display="none"; function count(){ var f = document.getElementById("f"); var b = document.getElementById("b"); b.disabled = true; f.disabled = true; if(f.value==""){ b.disabled = false; f.disabled = false; alert("請新增上傳檔案"); return false; } document.getElementById("up").style.display="inline"; bar = bar+2; amount = amount+line; document.getElementById("chart").value=amount; document.getElementById("percent").value=bar+"%"; if(bar<99){ setTimeout("count()",200); }else{ b.disabled = false; f.disabled = false; alert("載入完畢！"); document.getElementById("up").style.display="none"; // window.location=""; } } </script>