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

一：修改上传按钮样式

原来的<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;
}

二、上传控件代码

<button  class="upload">添加附件
	<input name="uploadFile" htmlEscape="false" type="file"  multiple="multiple"
			id="file"	class="replyFileid" />
</button>

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

jsp中

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

</div>

js中注意事项：

1）我这里是加了延时，如果不加可能会因为一些浏览器兼容性问题导致报错

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();"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" 
                  onclick="history.go(-1)"/>
		</div>
    </div>
</form:form>

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

猜你喜欢