js 上传多个文件 可以随意删除某个文件 |
您所在的位置：网站首页 › js删除input › js 上传多个文件 可以随意删除某个文件 |
js 上传多个文件 可以随意删除某个文件
|
选择文件
//把事件写在这里
//用 a链接包住的原因是为了美化 input file
未选择文件
// 根据上传的文件生成 每个 li
对应的界面
对用的事件方法 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 = '选择文件\n' + ' \n' + ' '; $('.no_file').before(html);//每次生成一个input file 插入到节点 var li; if (suffix == '.jpg' || suffix == '.jpeg' || suffix == '.png' || suffix == '.bmp' || suffix == '.gif') { //图片格式 li = ' ;' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; } else if (suffix == '.doc' || suffix == '.docx') {//word格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; } else if (suffix == '.xls' || suffix == '.xlsx') {//excel格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; } else if (suffix == '.ppt' || suffix == '.pptx') {//PPT格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else if (suffix == '.ppt' || suffix == '.pdf') {//PDF格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else if (suffix == '.zip' || suffix == '.rar'|| suffix == '.7z') {//压缩格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else if (suffix == '.wav' || suffix == '.mp3'|| suffix == '.aac'|| suffix == '.wma') {//声音格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else if (suffix == '.avi' || suffix == '.mp4'|| suffix == '.mov'|| suffix == '.mkv'||suffix == '.rm' || suffix == '.rmvb'|| suffix == '.mpg'|| suffix == '.mpeg') {//视频格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else if (suffix == '.txt' ) {//文本格式 li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; }else { li = ';' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除 '; } 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 标签里面 ;' + name + ' (' + parseInt(files.size / 1000) + 'kb) 删除因为当前的 input file 隐藏了 就要生成回去页面 var html = '选择文件\n' + ' \n' + ' '; $('.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();//自己删除自己 } |
【本文地址】
今日新闻 |
推荐新闻 |