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

         "javascript:void(0)" class="select_the_file">选择文件
                        type="file" class="iptFile" onchange="upFile(this)"> //把事件写在这里
                      //用 a链接包住的原因是为了美化 input file
                    class="no_file">未选择文件
                    
    class="upload-enclosure-ul"> // 根据上传的文件生成 每个 li









对应的界面

js 上传多个文件 可以随意删除某个文件_第1张图片








对用的事件方法

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 = '0)" class="select_the_file">选择文件\n' +
            '                        " class="iptFile" onchange="upFile(this)">\n' +
            '                    ';
        $('.no_file').before(html);//每次生成一个input file  插入到节点

        var li;
        if (suffix == '.jpg' || suffix == '.jpeg' || suffix == '.png' || suffix == '.bmp' || suffix == '.gif') { //图片格式
            li =   '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; } else if (suffix == '.doc' || suffix == '.docx') {//word格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; } else if (suffix == '.xls' || suffix == '.xlsx') {//excel格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; } else if (suffix == '.ppt' || suffix == '.pptx') {//PPT格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else if (suffix == '.ppt' || suffix == '.pdf') {//PDF格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else if (suffix == '.zip' || suffix == '.rar'|| suffix == '.7z') {//压缩格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else if (suffix == '.wav' || suffix == '.mp3'|| suffix == '.aac'|| suffix == '.wma') {//声音格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else if (suffix == '.avi' || suffix == '.mp4'|| suffix == '.mov'|| suffix == '.mkv'||suffix == '.rm' || suffix == '.rmvb'|| suffix == '.mpg'|| suffix == '.mpeg') {//视频格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else if (suffix == '.txt' ) {//文本格式 li = '
  • "> ' + name + ' size">(' + parseInt(files.size / 1000) + 'kb) " data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; }else { li = '
  • "fa fa-file-o"' + name + ' "size">(' + parseInt(files.size / 1000) + 'kb) "remove" data-class="li' + timeStamp + '" onclick="deleteLi(this)">删除
  • '; } 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"> 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 = '"javascript:void(0)" class="select_the_file">选择文件\n' +
                '                        type="file" class="iptFile" onchange="upFile(this)">\n' +
                '                    ';
            $('.no_file').before(html);//每次生成一个input file  插入到节点

    上传了两个文件的结果
    js 上传多个文件 可以随意删除某个文件_第2张图片

    下面是删除 因为每个 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();//自己删除自己
    }

    你可能感兴趣的:(日常代码)