Home Web Front-end JS Tutorial js implements uploading files, adding and deleting file selection boxes

js implements uploading files, adding and deleting file selection boxes

Dec 09, 2016 am 11:51 AM
js

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


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use JS and Baidu Maps to implement map pan function How to use JS and Baidu Maps to implement map pan function Nov 21, 2023 am 10:00 AM

How to use JS and Baidu Maps to implement map pan function

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Recommended: Excellent JS open source face detection and recognition project

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to create a stock candlestick chart using PHP and JS

How to use JS and Baidu Maps to implement map polygon drawing function How to use JS and Baidu Maps to implement map polygon drawing function Nov 21, 2023 am 10:53 AM

How to use JS and Baidu Maps to implement map polygon drawing function

How to use JS and Baidu Map to implement map click event processing function How to use JS and Baidu Map to implement map click event processing function Nov 21, 2023 am 11:11 AM

How to use JS and Baidu Map to implement map click event processing function

How to use JS and Baidu Maps to implement map heat map function How to use JS and Baidu Maps to implement map heat map function Nov 21, 2023 am 09:33 AM

How to use JS and Baidu Maps to implement map heat map function

See all articles