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

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

ning4551

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

阅读量2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/ning4551/article/details/80112838

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于业务要求一次上传很多个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="删除文件" onclick="deleteFile('+i+')" style="font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2">删除</span></li>';
			    };
			    document.getElementById('content').innerHTML = str;
			    arrayObj = new Array(); 
			}, false);
		});
		
		 
	    function deleteFile(fileId){
	    	//将数据添加到数字中
	    	arrayObj.push(fileId);
	    	alert(arrayObj);
	    	//将值赋给<input>
	    	document.getElementById("array").value = arrayObj;
	    	
	       var trNode = document.getElementById("li_" + fileId);  
	       var trParent = trNode.parentNode;  
	       trParent.removeChild(trNode);  
	    }  
		
		
		function validate(){
				 var filname=document.getElementById("filname");
				 if(filname.value==''){
				 alert('请上传模板！！！');
				 return false;
				 }else{
				 var msg = document.getElementById("msg").value;
				if(msg==""){
			    document.getElementById("lab").innerText="数据正在导入，系统自动核算考核,请稍后...";
			    document.getElementById("lab").style.color="red";
			    document.getElementById("sb").disabled=true;
			    //document.getElementById("filname").disabled=true;
			    }else{
			    document.getElementById("sb").disabled=false;
			    //document.getElementById("filname").disabled=false;
			    }
				 }
				}
		
		
		
	</script>
	</head>
	<body>
		<br />
		<div width=100% class="sys-div-center">
			<fieldset class="sys-fieldset-center">
				<legend>
					<s:property value="%{getText('SYS.MARK_1')}" />
					操作
					<s:property value="%{getText('SYS.MARK_2')}" />
				</legend>
				<s:form id="docManager" name="docManager"
					action="/excelSpAction/uploadExcel.shtml" enctype="multipart/form-data"
					method="post" onsubmit="return validate();">
					<table width="100%" class="sys-inputTable" cellpadding="0"
						cellspacing="0">
						<tr>
							<td class="sys-inputTable-td-left">
									冲收账期
							</td>
							<td class="sys-inputTable-td" width="23%">
								<d:date name="para.chargingtime" id="chargingtime" template="WdatePicker" skin="blue" dateFmt="yyyyMM" width="132"/>
							</td>
						<td class="sys-inputTable-td-left">
							<td align="left" class="sys-inputTable-td">
								   SP数据导入：
								<input type="hidden" name="para.doc_name" id="doc_name" readonly="readonly" />
								<input type="file" name="upload" id="filname" multiple/>
								<input type="submit" id="sb" value="上传" /><label id="lab"></label>
			                    <input type="hidden" value="${msg}" id="msg">
			                    <input type="hidden" name="para.array" id="array" value="" />
							</td>
						</tr>
					</table>
					<div >
						<ul id='content'></ul>
					</div>
				</s:form>
			</fieldset>
		</div>
		<div style="display:none">
		<d:page id="page" excelMethod="excelFacade.selectYSKHList" forGridId="khysTable" exportMode="jxl"/>
		</div>
	</body>
</html>

后台代码

   public class ExcelSpAction extends BaseAction {
    private static final ExecutorService EXECUTOR = Executors.newFixedThreadPool(5);
    private InputStream downloadFile;
    private String msg;
    private HashMap<String, Object> para = new HashMap<String, Object>();
    private Pagination page = new Pagination();
    private List khysList = new ArrayList();

    private SpExcelFacade spExcelFacade;
    private List<File> upload;
    private List<String> uploadContentType;
    private List<String> uploadFileName;
    
    public List getKhysList() {
        return khysList;
    }

    public void setKhysList(List khysList) {
        this.khysList = khysList;
    }

    public SpExcelFacade getSpExcelFacade() {
        return spExcelFacade;
    }

    public void setSpExcelFacade(SpExcelFacade spExcelFacade) {
        this.spExcelFacade = spExcelFacade;
    }

    public String uploadExcel() {
        PrintWriter out = null;
        msg = "数据正在导入，系统正在导入,请稍后...";
        try {
            out = getResponse().getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //获取冲收账期
        String chargingtime =(String) para.get("chargingtime");
        //获取删除的文件的索引
        String indexs = (String) para.get("array");
        String[] splits = indexs.split(",");
        if(StringUtils.isBlank(chargingtime)){
            out.println("<script>alert('冲收账期不能为空！请填入冲账期！！！');document.location.href='open-excelimport.shtml';</script>");
            return null;
        }
        try{
            for(int i = 0; i < upload.size(); i++){
                if(!Arrays.asList(splits).contains(i+"")){
                   // handleExcel(upload.get(i), chargingtime);
                   //文件处理相关逻辑
                }
            }
............

xml配置

<struts>
	<constant name="struts.enable.DynamicMethodInvocation" value="false"/>
    <constant name="struts.devMode" value="true"/>
    <constant name="struts.multipart.saveDir" value="/tmp"/>
    <constant name="struts.custom.i18n.resources" value="app"></constant>
    
	<package name="excelSpAction" extends="spCommspPackage" namespace="/excelSpAction">
		<!-- 录入收入投诉操作 -->
		<action name="open-excelimport" class="excelSpAction">
			<result name="success">
				/WEB-INF/pages/comm/cpsp/excelimport.jsp
			</result>
		</action>
		<action name="uploadExcel" class="excelSpAction" method="uploadExcel">
			<result name="success">
				/WEB-INF/pages/comm/cpsp/excelimport.jsp
			</result>
		</action>
	</package>
</struts>