手动javascript 实现多个文件上传效果

最新推荐文章于 2024-09-13 10:39:01 发布

knoisk

最新推荐文章于 2024-09-13 10:39:01 发布

阅读量241

点赞数

分类专栏： gg 文章标签： js file

本文链接：https://blog.csdn.net/knoisk/article/details/80745721

版权

gg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击“添加附件链接”，手动构造dom节点，模拟上传文件；点击删除，删除dom节点；

最多同时上传5个文件，可以将模拟效果更改为进度条，只要将percent更改为背景颜色的百分比width显示.

<html>
<head>
<meta charset="UTF-8">
<title>編輯新聞頁面</title>

<script type="text/javascript">
       //var timer;
       //var num = 0;
       var fnum=0;
       var fnums=new Array(true,true,true,true,true);
       var timer=new Array(5);
       var num=new Array(0,0,0,0,0);

       function cancelF() {
          // alert("delete suceed!");
           var cur=this.id.split("_")[1];
           if(num[cur]<10) timer[cur] = clearInterval(timer[cur]);
           var node = document.getElementById("areaF_"+cur);
           var pnode = document.getElementById("upfile");
           pnode.removeChild(node);
           fnums[cur]=true;
       }
       function uploadF() {
           var cur=this.id.split("_")[1];
           timer[cur] = setInterval(function(){updateP(cur);}, 1000);
       }
       function updateP(cur) {
           var node = document.getElementById("per_"+cur);
           node.className="spanF";
           node.innerHTML = "percent: " + num[cur] * 10 + "%";
           num[cur]++;
           if (num[cur] > 10)
               timer[cur] = clearInterval(timer[cur]);
       }
       function addFile() {
           fnum=5;
           fnums.forEach(function(v,i){//v==value　为项，i==index　为arr索引
                  if(v) fnum=i;
           });
           if(fnum>=5) return false;
           var pnode = document.getElementById("upfile");
           var myarea = document.createElement("div");
           var mynode = document.createElement("input");
           var mypercent = document.createElement("span");
           var mylink = document.createElement("a");
           var textF = document.createTextNode("删除");
           myarea.className = "areaF";
           myarea.id="areaF_"+fnum;
           mynode.className = "pathF";
           mynode.type = "file";
           mynode.onchange = uploadF;
           mynode.id="pathF_"+fnum;
           mypercent.id = "per_"+fnum;
           mypercent.className = "spanF hiddenS";
           mypercent.innerHTML = "";
           mylink.href = "#";
           mylink.className = "hrefF";
           mylink.onclick = cancelF;
           mylink.id="hrefF_"+fnum;
           mylink.appendChild(textF);
           myarea.appendChild(mynode);
           myarea.appendChild(mypercent);
           myarea.appendChild(mylink);
           pnode.appendChild(myarea);
           fnums[fnum]=false;
           return false;
       }
   </script>
<style type="text/css">
div.upfile {
   width: 500px;
}

div a, div span {
   color: #000000;
   font-family: Arial;
   font-size: 12px;
   height: 24px;
   line-height: 20px;
   background: none;
}

.areaF {
   width: 500px;
   height: 35px;
   background-color: rgb(227, 234, 244);
}

.pathF {
   width: 350px;
   height: 24px;
   float: left;
   margin: 5px 5px;
   font-family: Arial;
   font-size: 12px;
}

.spanF {
   display: inline-block;
   width: 80px;
   height: 24px;
   margin: 5px 5px;
   height: 24px
}

.hrefF {
   width: 24px;
   float: right;
   margin: 5px 15px 5px 5px;
   float: right;
}

.hiddenS {
   visibility: hidden;
}

.hiddenN {
   diplay: none;
}

.showS {
   visibility: visible;
}
</style>
</head>
<body>
   <div>
       <div id="upfile" class="upfile">
           <a href="#" οnclick=addFile();>上传附件</a><br />
       </div>

   </div>
</body>
</html>