多附件添加功能的实现

最近这个项目需要多附件添加 真是被搞死 这么简单的小功能做了两天

两种解决方案

1.input file标签支持多附件 只需要添加multiple属性

<input type="file" name="file" onChange="checkFiles(this)" multiple>

缺点：这种添加只能是弹出文件选择框进行多选，但第二次选择会覆盖第一次选择的结果

2.网上查找第二种解决思路 就是每次添加时新建input file

在这种程度上再进行美化 把input file进行隐藏   ===>整体效果类似于 邮箱添加附件

<div>

<input type="button" value="添加" style="cursor:hand" οnclick="addMoreFiles();" />
<table id="addFile" style="visible:false"></table>

</div>

重点就是js

var fileIndex=0；

function addMoreFiles(){

    //新增加的附件都作为table的一个row
    var table = document.getElementById("addFile");


    $('input[name=file]').each(function(){
        //alert($(this).val());
        if($(this).val()==""){
        var fileId="file"+fileIndex;
        var fileDel="a"+fileIndex;
        var godzilla = document.getElementById(fileId);
        var del = document.getElementById(fileDel);
       
        del.click();
        }
    });
    
   
    fileIndex++;
    var fileName="file";
    var fileText="fileName"+fileIndex;
    var fileId=fileName+fileIndex;
    var row = table.insertRow(-1);
    var fileInput="<input name='inputFile' data-index='"+fileIndex+"' onChange='changeName(this)' id='"+fileId+"' class='file'  style='opacity: 0;width:0px' type='file'  size='1' />";


    var cell = row.insertCell(-1);
    var attrNameHTML = fileInput;
    var textName="<input id='"+fileText+"' name='file' readonly height='0px' style='border:0px #cccccc solid;width:450px;'  onBlur=\"this.className='blur'\" value=''></input>";  
    cell.innerHTML=attrNameHTML+textName;
    cell.align="center";
    
    var cell1 = row.insertCell(-1);
    var delLink = "<a id='a"+fileIndex+"' href='javascript:void(0)' οnclick='deleteOper(this);'></a>";
    cell1.innerHTML=delLink;
    cell1.align="center";
    
    godzilla = document.getElementById(fileId);
    //godzilla.onClick=charge(godzilla);
    //document.getElementById(fileId).addEventListener('change', myMethod, false);


    godzilla.click();
   // godzilla.setAttribute("disabled", true);
    
}

function changeName(file){
var index = "#"+file.id;
index = $(index).data("index");
var text="#fileName"+index;
var aText = "#a"+index;
if(file.files.length>0){
$(text).val(file.files[0].name);
var img ="<img src='"+PATH+"/style/blue/style/images/close.png'/>";
$(aText).html(img);
checkFiles(file);

}
}