php js框上传文件,js实现上传文件添加和删除文件选择框

本文这里给大家说个用javascript实现的很实用的功能，是在上传附件的时候，可以动态地添加和删除文件选择框，然后一次性上传。

从理论上看，实现起来比较容易，但实际工作的时候还是遇到两个难点，这些难点归结起来都是一个原因造成的，那就是浏览器的兼容性。在脚本中要用到两个函数：insertAdjacentHTML和removeChild，而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候，在网上搜索着解决的方法，还好被找到了，也让我大松一口气。

具体两个函数是这样的：

//删除文件选择框

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

insertHtml("beforeend",document.getElementById(id),str);

}

页面上这样引用：

在addFile函数中引用了另一个函数：insertHtml，这个函数主要是针对insertAdjacentHTML在firefox下无效的情况重写的，具体可以通过搜索insertAdjacentHTML找到。

PS：清除file框的内容

第二个案例

文件上传，删除效果图：

刚开始：

点击按钮“选择更多后”，可以添加很多选择文件：

点击按钮“删除”后：

实现代码：

选择文件

*{

margin:0px;

padding:0px;

}

div{

margin:10px;

}

//当点击添加更多时，增加一个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);

}

相关标签：js

本文原创发布php中文网，转载请注明出处，感谢您的尊重！