兼容IE8的多文件上传实现

兼容IE8的注意点：

原生多文件属性multiple只在IE10/11上有效，IE8不兼容无法使用
formdata对象同样只支持在IE10/11，IE8无法使用
很多API在IE8上无法使用，同样是兼容的难点
IE8的安全机制，使一些操作无法实现

本文使用原生JS对文件进行简单处理实现多文件上传，未使用其他插件。

实现思路：

由于multiple属性无法使用，采取通过增加input框的方式实现多文件的选择和存储，故单次只能选择一个文件，可选择多次。

选择完一个文件之后，调用方法隐藏input，并将文件名以列表形式显示出来，并提供删除选项。

效果图：

实现代码：

<!DOCTYPE html>
<html><head><title>多文件上传</title><meta charset="utf-8"><style>.file-select{position: relative;}/*设置透明*/.file-select input[type=file]{position: absolute;width: 50px;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;-webkit-opacity: 0;-moz-opacity: 0;z-index: 100;}.brower{display: inline-block;width: 50px;position: absolute;left: 0px;color: skyblue;}.file-select input:hover + span.brower{text-decoration: underline;}</style>
</head><body><form action="hello.do" method="post" enctype="multipart/form-data"><div id="eee"><span>选择文件：</span><input type="submit"  value="提交" /><br /><div class="file-select" id="file_div1"><input type="file" name="UploadFile" onchange="fileChange()" /><span class="brower">浏览</span><input type="button" onclick="deleteDiv()" style="display: none;" value="删除" /></div></div></form><script>var FILECOUNT = 1;function fileChange() {var preDiv = document.getElementById("file_div" + FILECOUNT);var nextDiv = preDiv.cloneNode(true);FILECOUNT = FILECOUNT + 1;// 添加新的divnextDiv.setAttribute("id", "file_div" + FILECOUNT)document.getElementById("eee").appendChild(nextDiv);// 对已选完文件的div进行处理var preFile = preDiv.children[0],preSpan = preDiv.children[1],preButton = preDiv.children[2];preFile.style["display"] = "none";preSpan.className = "";preSpan.innerHTML = preFile.value;preButton.style["display"] = "inline-block";}// 删除方法function deleteDiv(event) {var ev = event || window.event;var target = ev.target || ev.srcElement;document.getElementById("eee").removeChild(target.parentNode);}</script>
</body></html>

持续更新：github地址

兼容IE8的多文件上传实现相关推荐

nodejs文件服务器断点续传,基于Nodejs的大文件上传之断点续传
接着<扒一扒Nodejs formidable的onPart>和<也说文件上传之兼容IE789的进度条---丢掉flash>:前面已完成兼容IE789的大文件上传:无flash ...
python flask上传文件_flask 文件上传（单文件上传、多文件上传）--
文件上传在HTML中,渲染一个文件上传字段只需要将标签的type属性设为file,即. 这会在浏览器中渲染成一个文件上传字段,单击文件选择按钮会打开文件选择窗口,选择对应的文件后,被选择的文件名会显 ...
formData文件上传兼容IE8
场景:XP环境IE8版本的浏览器,在iframe内文件上传问题: 1.使用webupload 在ie8下模拟点击打开文件选择器,按钮点击无反应. 查阅资料后,得知原因是webupload在ie8下使 ...
兼容IE低版本的文件上传解决方案
兼容IE低版本的文件上传解决方案参考文章: (1)兼容IE低版本的文件上传解决方案 (2)https://www.cnblogs.com/zhou195/p/9253895.html 备忘一下.
php curl post 文件_php curl文件上传$_FILES为空，只有$_POST有值，如何兼容php5.0~5.6各版本...
PHP 5.5以下用@,php5.5 @已被弃用,但勉强还能用,php5.6直接删除了@用法,必须得用new CURLFile(realpath('image.png'))这种方式才行了.关键我这还没 ...
兼容IE9的文件上传
前提:做兼容ie9的文件上传需要后台共同配合,靠前端自己的力量是不行的做文件上传, 我几乎把网上能找的文章都看了, 但是在我这就是行不通, 欸, 就是玩儿, 搞得我很火大, 还好实现了, 下面说说 ...
文件上传事件兼容性解决方案：兼容ie和谷歌
在使用vue的做文件上传的时候,发现IE11兼容性有问题,无法打开文件选择器.现解决方案如下 var event; console.log("typeof (Event)========== ...
uploadify多文件上传插件
这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...
Java关于文件上传的一个例子
文件上传不能用get方式提交,因为他提交的数据量最多只有1kb, IE浏览器默认情况下把file对象当做普通的文本框.并没有当做文件上传来处理. 普通文的表单name =value的形式提交数据. 文 ...
简便无刷新文件上传系统
兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览文件上传选择文件重命名操作状态重置选择文件 ...

兼容IE8的多文件上传实现

兼容IE8的多文件上传实现相关推荐

最新文章

热门文章