fastDFS+LibreOffice多文件上传(二)前端部分：修改上传按钮样式和上传后在页面显示

心已赠人 2022-04-16 04:49 130阅读 0赞

一：修改上传按钮样式

原来的<input type="file"/>太丑了，所以我自己设置了样式。方法：在<input type="file"/>上面加一层div，遮住它。

.upload{
    			padding: 0px 25px;
    			line-height: 20px;
    			position: relative;
    			text-decoration: none;
    			cursor: pointer;
    			border-radius: 4px;
    			background-color:#F5F5F5;
    			border: 1px solid #DCDCDC;
    }
    .replyFileid{
    			position: absolute;
    			overflow: hidden;
    			right: 0;
    			top: 0;
    			opacity: 0;
    			cursor: pointer;
    }

二、上传控件代码

三、文件上传后，通过js直接将上传的文件在页面上显示

jsp中

<%--选择添加附件后，选择文件后直接在页面中显示--%>
    <div id="toUploadFile">
    
    </div>

js中注意事项：

1）我这里是加了延时，如果不加可能会因为原因报错，具体bug我忘记了

2）要根据你的语法来决定是使用document.getElementById("ID")还是$("\#ID")来获得id值，主要就是jQuery或者原生语法的选择

/* 监听添加附件事件，选择文件后直接在页面中显示 */
    window.setTimeout(function() {
    			document.getElementById("file").addEventListener("change",function (e) {
                    $("#toUploadFile").empty();
                    var nameArr = e.currentTarget.files;
                    var bodyFile = document.getElementById("toUploadFile");//通过id号获取frameDiv 的父类（也就是上一级的节点）
                    for(var i=0;i<nameArr.length;i++){
                        var bodyP = document.createElement("p");//创建一个标签
                        bodyP.innerHTML = "附件"+ (i+1) + "：附件." + nameArr[i].name;
                        bodyFile .appendChild(bodyP);//把创建的节点frameDiv 添加到父类body 中
                    }
                });
    }, 500);

四：完整的jsp上传代码

1）form中要添加 enctype="multipart/form-data"

2）后台接收是使用@RequestParam("uploadFile") CommonsMultipartFile\[\] files或者MultipartFile\[\] files，因为是多文件，要记得加数组标记\[\]，另外判断文件是否为空，要根据文件名判断。

if (StringUtils.isNotBlank(file.getOriginalFilename()))\{\}

<form:form id="inputForm" modelAttribute="notice" action="${ctx}/info/notice/save"
    			   method="post" class="form-horizontal" enctype="multipart/form-data">
    
        <div>
            <button  class="upload">添加附件
            <input name="uploadFile" htmlEscape="false" type="file"  multiple="multiple"
    			   id="file"	class="replyFileid" />
    		</button>
    			
            <p></p>
    		<%--选择添加附件后，选择文件后直接在页面中显示--%>
    		<div id="toUploadFile">
    
    		</div>
    
            <div class="form-actions">
    			<input class="btn btn-primary" type="button" value="确认提交"         
                       onclick="beforeSubmit();"/> 
    			<input id="btnCancel" class="btn" type="button" value="返 回" 
                      onclick="history.go(-1)"/>
    		</div>
        </div>
    </form:form>