js 上传多个文件 可以随意删除某个文件

         <a href="javascript:void(0)" class="select_the_file">选择文件
                        <input type="file" class="iptFile" onchange="upFile(this)"> //把事件写在这里
                    </a>  //用 a链接包住的原因是为了美化 input file
                    <span class="no_file">未选择文件</span>
                    <ul class="upload-enclosure-ul"> // 根据上传的文件生成 每个 li
                          <!--   <li>
                                 <span>asdasdgfbhfdfdfsd.pdf</span>  //文件名
                                 <span class="size">(267kb)</span>   //大小
                                 <span class="remove">删除</span>  //删除对应 input file 标签
                             </li>
                             <li>
                                 <span>dfsgdfdfgdfg.doc</span>
                                 <span class="size">(267kb)</span>
                                 <span class="remove">删除</span>
                             </li>-->
                    </ul>

对应的界面

对用的事件方法

function upFile(a) {

    var flag = $(a);
    if (!flag[0].files || !flag[0].files[0]) {
        return;
    }
    var name = flag[0].files[0].name;
    var suffix =suffixName(name)[0].toLowerCase(); //后缀名
    var size = flag[0].files[0].size;  //文件大小
    var fr = new FileReader(); // 这个FileReader应该对应于每一个读取的文件都需要重新new一个
    var files = flag[0].files[0]; // files可以获取当前文件输入框中选择的所有文件，返回列表
    fr.readAsDataURL(files); // 读取的内容是加密以后的本地文件路径
    fr.onload = function (e) { // 数据读取完成时触发onload对应的响应函数
        console.log(123);
        var timeStamp = Math.floor(Math.random() * 10000); //自定义一个随机数
        $(flag).parent().addClass('li' + timeStamp).hide(); //每次隐藏之前添加一个Class
        var html = '<a href="javascript:void(0)" class="select_the_file">选择文件\n' +
            '                        <input type="file" class="iptFile" onchange="upFile(this)">\n' +
            '                    </a>';
        $('.no_file').before(html);//每次生成一个input file  插入到节点

        var li;
        if (suffix == '.jpg' || suffix == '.jpeg' || suffix == '.png' || suffix == '.bmp' || suffix == '.gif') { //图片格式
            li =   '<li> <span><i class="fa fa-file-image-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        } else if (suffix == '.doc' || suffix == '.docx') {//word格式
            li = '<li><span><i class="fa fa-file-word-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        } else if (suffix == '.xls' || suffix == '.xlsx') {//excel格式
            li = '<li><span><i class="fa fa-file-excel-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        } else if (suffix == '.ppt' || suffix == '.pptx') {//PPT格式
            li = '<li><span><i class="fa fa-file-pdf-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else if (suffix == '.ppt' || suffix == '.pdf') {//PDF格式
            li = '<li><span><i class="fa fa-file-pdf-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else if (suffix == '.zip' || suffix == '.rar'|| suffix == '.7z') {//压缩格式
            li = '<li><span><i class="fa fa-file-excel-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else if (suffix == '.wav' || suffix == '.mp3'|| suffix == '.aac'|| suffix == '.wma') {//声音格式
            li = '<li><span><i class="fa fa-file-video-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else if (suffix == '.avi' || suffix == '.mp4'|| suffix == '.mov'|| suffix == '.mkv'||suffix == '.rm' || suffix == '.rmvb'|| suffix == '.mpg'|| suffix == '.mpeg') {//视频格式
            li = '<li><span><i class="fa fa-file-video-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else if (suffix == '.txt' ) {//文本格式
            li = '<li><span><i class="fa fa-file-text-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }else {
            li = '<li><span><i class="fa fa-file-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>';
        }

        if ($('.upload-enclosure-ul li').length < 10) {  //判断不能超过10个  可自行写入多少
            $('.upload-enclosure-ul').append(li);
        } else {
            pageCommon.layerMsg("最多能选择10个附件", 2, true)
        }

        if ($('.upload-enclosure-ul li').length != 0) {  // 显示隐藏 未选择文件字眼
            $('.no_file').hide();
        } else {
            $('.no_file').show();
        }
    };


}



function deleteLi(a) {
    $(a).parent().remove();
    var attr = $(a).attr('data-class');
    var newAttr = '.' + attr;
    $('.inspection_item_con_file  ' + newAttr + '').remove(); //删除对应 input file

    if ($('.upload-enclosure-ul li').length != 0) { // 显示隐藏 未选择文件字眼
        $('.no_file').hide();
    } else {
        $('.no_file').show();
    }
}



function suffixName(file_name){
    var result = /\.[^\.]+/.exec(file_name);
    return result;
}

思路：每次选择完文件 fr.onload 方法 里面随机生成一个数 然后 给当前的 input file 设 class 为 随机生成的数后隐藏元素

 var timeStamp = Math.floor(Math.random() * 10000); //自定义一个随机数
 $(flag).parent().addClass('li' + timeStamp).hide(); //每次隐藏当前input file之前添加一个Class

重点是 每个ul 的 li 里面 也自定义一个属性 值为 随机生成的数 相对应好 input file 我这里的自定义属性为
data-class 为了删除的时候好拿值 生成li 就要 添加到 ul 标签里面

<li> <span><i class="fa fa-file-image-o">&nbsp;</i>' + name + '</span> <span class="size">(' + parseInt(files.size / 1000) + 'kb)</span> <span class="remove" data-class="li' + timeStamp + '"  onclick="deleteLi(this)">删除</span> </li>

因为当前的 input file 隐藏了 就要生成回去页面

var html = '<a href="javascript:void(0)" class="select_the_file">选择文件\n' +
            '                        <input type="file" class="iptFile" onchange="upFile(this)">\n' +
            '                    </a>';
        $('.no_file').before(html);//每次生成一个input file  插入到节点

上传了两个文件的结果

下面是删除 因为每个 li 里面 的 删除 写了个 deleteLi事件

function deleteLi(a) {

    var attr = $(a).attr('data-class'); //获取到 定义的自定义属性值   值对应隐藏的input file  的class
    var newAttr = '.' + attr;
    $('.inspection_item_con_file  ' + newAttr + '').remove(); //删除对应 input file

    if ($('.upload-enclosure-ul li').length != 0) {  // 显示隐藏 未选择文件字眼
        $('.no_file').hide();
    } else {
        $('.no_file').show();
    }
    $(a).parent().remove();//自己删除自己
}