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 = '<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>'
insertHtml("beforeend",document.getElementById(id),str);
}
</script>
Dies wird auf der Seite zitiert:
<div>
<input type="button" value="添加附件(Add)" onclick="addFile('myfile')">
</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('Delete');" value=清除file框的内容>
Der zweite Fall
Datei hochladen, löschen Rendering:
Gerade gestartet:
Klicken Sie auf die Schaltfläche „Nachdem Sie mehr ausgewählt haben“, können Sie viele Auswahldateien hinzufügen:
Nach dem Klicken auf die Schaltfläche „Löschen“:
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>
