多文件上传,并且可以进行动态删除

最新推荐文章于 2023-05-25 11:34:14 发布

ning4551

最新推荐文章于 2023-05-25 11:34:14 发布

阅读量2k

点赞数

文章标签：前端 java 多文件上传

本文链接：https://blog.csdn.net/ning4551/article/details/80112838

版权

这篇博客探讨了一种解决前端多文件上传并允许动态删除的方案。通过获取文件名，将删除文件的索引存储在数组中，然后传递给后台。后台根据这些索引过滤不需要处理的文件，避免了传统多文件上传方式的限制。

摘要由CSDN通过智能技术生成

由于业务要求一次上传很多个excel,并且可以进行筛选,删除不用的,查了许多上传,大多是添加多个<input type="file" name="upload" id="filname"/> 不能一次选择,不能使用multiple属性,最后想到获取文件的名称,将删除的文件的索引放到数组中,传给后台,后台遍历文件时,如果与删除文件索引相同,对此文件不进行处理

<html>
	<head>
		<title>数据导入</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/sys/css/sys-style.css"></link>
		<script type="text/javascript" src="${pageContext.request.contextPath}/sys/js/common.js"></script>
		<script language="JavaScript" type="text/javascript" src="${pageContext.request.contextPath}/sys/js/jquery.js"></script>
		    <style type="text/css">
 					  ul li{list-style:none;display:block;text-align:left;line-height:30px}
 					  ul {display:inline-block;}
        </style>
		<script type="text/javascript">
		var arrayObj= null;
		$(function(){
			var test = document.getElementById('filname');
			test.addEventListener('change', function() {
			    var t_files = this.files;
			    var str = '';
			    for (var i = 0, len = t_files.length; i < len; i++) {
			        console.log(t_files[i]);
			        str += '<li'+' id="li_'+i+'"'+'>名称：' + t_files[i].name + '<span title="删除文件" οnclick="deleteFile('+i+')" style="font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2">删除</span></li&g

最低0.47元/天解锁文章

ning4551

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多文件上传,并且可以进行动态删除

由于业务要求一次上传很多个excel,并且可以进行筛选,删除不用的,查了许多上传,大多是添加多个&lt;input type="file" name="upload" id="filname"/&gt; 不能一次选择,不能使用multiple属性,最后想到获取文件的名称,将删除的文件的索引放到数组中,传给后台,后台遍历文件时,如果与删除文件索引相同,对此文件不进行处理&lt;html&gt; ...
复制链接

扫一扫