suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert das Hochladen von Dateien sowie das Hinzufügen und Löschen von Dateiauswahlfeldern

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

高洛峰
高洛峰Original
2016-12-09 11:51:231725Durchsuche

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>

Dies wird auf der Seite zitiert: 

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

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框的内容>

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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementieren Sie die Überprüfungsmethode des E-Mail-Formats in jsNächster Artikel：Implementieren Sie die Überprüfungsmethode des E-Mail-Formats in js

In Verbindung stehende Artikel

Mehr sehen