兼容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()