js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern-js-Tutorial-php.cn

js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern

高洛峰

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

Original

1753 Leute haben es durchsucht

In diesem Artikel erfahren Sie mehr über eine sehr praktische Funktion, die mit Javascript implementiert wurde. Beim Hochladen von Anhängen können Sie Dateiauswahlfelder dynamisch hinzufügen und löschen und sie dann alle auf einmal hochladen.

Theoretisch ist es relativ einfach zu implementieren, aber in der Praxis stoßen wir immer noch auf zwei Schwierigkeiten. Diese Schwierigkeiten sind alle auf einen Grund zurückzuführen, und zwar auf die Browserkompatibilität. Im Skript werden zwei Funktionen verwendet: insertAdjacentHTML und removeChild. Es kommt vor, dass diese beiden Funktionen unter Firefox nicht normal verwendet werden können. Ich habe fast einen Tag damit verbracht, im Internet nach einer Lösung zu suchen, und zum Glück wurde ich gefunden, was mich aufatmen ließ.

Die spezifischen zwei Funktionen sind wie folgt:

<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>

Nach dem Login kopieren

Dies wird auf der Seite zitiert:

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

Nach dem Login kopieren

bezieht sich auf eine andere Funktion in der Funktion addFile: insertHtml. Diese Funktion wurde hauptsächlich für den Fall neu geschrieben, dass insertAdjacentHTML in Firefox ungültig ist. Sie können sie finden, indem Sie nach insertAdjacentHTML suchen.

PS: Löschen Sie den Inhalt des Dateifelds

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

Nach dem Login kopieren

Der zweite Fall

Datei hochladen, löschen Rendering:

Gerade gestartet:

js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern

Klicken Sie auf die Schaltfläche „Nachdem Sie mehr ausgewählt haben“, können Sie viele Auswahldateien hinzufügen:

js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern

Nach dem Klicken auf die Schaltfläche „Löschen“:

js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern

Implementierungscode:

<!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>

Nach dem Login kopieren