兼容IE8前端一次性上传多个文件功能

兼容IE8前端一次性上传多个文件功能

场景说明

因为IE8不支持 HTML5的multiple="multiple"属性，无法一次性选择多个文件，并且后端开发就已经使用List<MultipartFile> files 接收前端发送的多个文件，后端不想进行修改，故而在前端进行改造。

思考尝试

使用多个同name值得 type=file的input来上传多个文件

（1）在列表中显示多个 <input name=“files” type=“file”>，使用一个【添加】按钮，需要多文件就添加一个input在页面；

（2）页面只显示一个input，通过 onchange事件，来控制有上传文件的input的就隐藏，界面显示的是文件名称和一个删除按钮，并创建一个新的input显示在原来的位置，两个文件的前端代码类似：

<div id="uploadBtn">
    <input name="files" type="file" style="display:none;"/> <!-- 已经上传文件的，不会显示在界面 -->
    <input name="files" type="file" > <!-- 当前界面显示的是这个 -->
</div>
<div id="fileNames">
    <span>
    	<!-- 隐藏对应的input，显示input上传的文件名 -->
        文件1.txt <a onclick="del()" >删除</a>  <!-- 通过删除按钮可以移除已经添加的文件 -->
    </span>
</div>

界面效果

抉择

第一种方式在界面上显示不美观、不直接，所以采取第二种方式。

具体实现代码

jsp页面初始显示内容：

<div id="uploadBtn">
    <input type="file" id="posterFile" name="files" onchange="fileChange(this)"/>
</div>
<div id="fileArea" style="display:none;">
    <!-- jstl 循环是回显之前上传的数据 -->
    <c:forEach var="attachBo" items="${attachBos }">
        <span style="padding-right: 15px;">
            <a href="javascript:void(0);" onclick="parent.downloadFile('${fileId}', '${recoredId}')">${attachBo.fileName }</a> <!-- 回显文件点击文件名下载 -->
            <a href="javascript:void(0);" onclick="delFile(this, '$fileId}')" >删除</a> <!-- 点击删除旧文件 -->
        </span>
    </c:forEach>
</div>

/**
* 上传文件后事件处理
* 隐藏当前input，再添加一个新的input，用于再添加待上传文件
* 解析添加的文件，获取文件名，并显示，提供一个删除超链接，可以移除添加的文件
*/
window.fileChange = function(that) {
    var id = $(that).attr("id");
    var filePath = $("#" + id).val();
    if (filePath && filePath != null && filePath != '') {
        // 解析文件名
        var fileName = filePath.substring(filePath.lastIndexOf("\\")+1);
        var ext = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
        // 处理显示的文件名和删除链接
        var fileInfo = '<span style="padding-right: 15px;">' +
            fileName + 
            ' <a href="javascript:void(0);" οnclick="delFileInput(this, \'' + id + '\')" >删除</a>' +
            '</span>';
        // 添加到文件名显示区
        $("#fileArea").append(fileInfo);
        $("#fileArea").show();
        $(that).hide(); // 隐藏自身
        var inputId = new Date().getTime();
        $("#uploadBtn").append('<input type="file" name="files" οnchange="fileChange(this)" id="' + inputId + '"/>'); // 添加新上传的input
    }
}
/*
* 未上传到服务器的文件删除
* 移除文件上传的input，并删除文件名
*/
window.delFileInput = function(that, inputId) {
    $(that).parent().remove();// 移除文件名
    $("#" + inputId).remove();// 根据id移除已添加文件的input
}

扩展Spring MVC接收多文件问题解决

Spring Mvc 接收多文件碰到的问题