js implements uploading files, adding and deleting file selection boxes-JS Tutorial-php.cn

js implements uploading files, adding and deleting file selection boxes

高洛峰

Release： 2016-12-09 11:51:23

Original

1686 people have browsed it

This article will tell you about a very practical function implemented using javascript. When uploading attachments, you can dynamically add and delete file selection boxes, and then upload them all at once.

In theory, it is relatively easy to implement, but in actual work, we still encounter two difficulties. These difficulties are all attributed to one reason, and that is browser compatibility. Two functions are used in the script: insertAdjacentHTML and removeChild, and it happens that these two functions cannot be used normally under Firefox. I spent almost a day searching for a solution on the Internet, and luckily I was found, which made me breath a sigh of relief.

The specific two functions are as follows:

<script type="text/javascript">
  //删除文件选择框
  function removeFile(id) {
    var new_tr = id.parentNode;
    try {
      //new_tr.removeNode(true);
      // just ie , not w3c;
 
      // other idea
      var tmp = new_tr.parentNode;
      // 为了在ie和firefox下都能正常使用,就要用另一个方法代替,最取上一层的父结点,然后remove.
      tmp.removeChild(new_tr);
 
     } catch(e) {}
  }
   
  //添加文件选择框
  function addFile(id)
  {
   var str = &#39;<div><input type="file" runat="server" name="file" onKeyDown="this.blur();" oncontextmenu="return false" /><input type="button" value="删除" style="height:22px;" onclick="removeFile(this)" /></div>&#39;
   insertHtml("beforeend",document.getElementById(id),str);
   }
</script>

Copy after login

is quoted as follows on the page:

<div>
    <input type="button" value="添加附件(Add)" onclick="addFile(&#39;myfile&#39;)">
    </div>
  <div id="myfile">
</div>

Copy after login

refers to another function in the addFile function: insertHtml, this function is mainly for insertAdjacentHTML under firefox It is rewritten in invalid cases. You can find it by searching insertAdjacentHTML.

PS: Clear the contents of the file box

<input  type=file  name=ttt>   
 <input  type=button  onclick="ttt.select();document.execCommand(&#39;Delete&#39;);"   value=清除file框的内容>

Copy after login

Second case

File upload, delete rendering:

Just started:

js implements uploading files, adding and deleting file selection boxes

Click the button "After selecting more", you can add Many selection files:

js implements uploading files, adding and deleting file selection boxes

After clicking the button "Delete":

js implements uploading files, adding and deleting file selection boxes

Implementation code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择文件</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
margin:10px;
}
</style>
 
 
<script>
//当点击添加更多时，增加一个DIV
//先增加两个input
 
function addFile(){
var fragment=document.createDocumentFragment();
var divNode=document.getElementById("container");
 
var newDiv=document.createElement("div");
newDiv.setAttribute("id","file");
fragment.appendChild(newDiv);
 
var newInput=document.createElement("input");
newInput.setAttribute("type","file");
newInput.setAttribute("name","选择文件");
newDiv.appendChild(newInput);
 
var newInput=document.createElement("input");
newInput.setAttribute("type","button");
newInput.setAttribute("value","删除");
newInput.setAttribute("onclick","delFile()");
newInput.setAttribute("id","1");
newDiv.appendChild(newInput);
 
divNode.appendChild(fragment);
}
function delFile(){
var divNode=document.getElementById("container");
divNode.removeChild(divNode.firstElementChild);
}
</script>
</head>
<body>
<input type="button" value="选择更多" onclick="addFile()"/>
<div id="container">
<div id="file">
<input type="file" name="选择文件"/>
<input type="button" value="删除" onclick="delFile()" />
</div>
</div>
</body>
</html>

Copy after login