FED实验室 - 专注WEB端开发和用户体验
> 文件上传那些事儿
今日头条：”东方之星“客轮湖北监利沉船，可能是中国有史以来的最大的沉船事故。
最近 M 端项目中涉及到图片上传功能，现把项目中遇到的一些问题及解决办法分享如下，与各位共同探讨：
一、相关需求：
客户端上限 10M
服务器端上限 2M
显示上传进度
多文件上传
二、需求分析：
实现 2，可使用 canvas 在前端实现压缩(base64)；
实现 1、3，可采用 file.size 及/image/.test(file.type)过滤；
实现 4，使用 XHR2 实现上传，添加进度时间监控，xhr.upload.addEventListener("progress", uploadProgress, false)；
实现 5，使用 XHR2 实现上传；
多文件上传，单文件循环上传即可，但是兼容进度时，需单文件各自监控；
三、需求实现：
实现一：二进制方式上传
需求 1、3、4、5、6 皆可实现，但是服务器端上传 2M，使用 canvas 方式压缩后生成的是 base64，若使用此方式上传，必须把 base64 转换成二进制流，GitHub 上也有相关文章把 base64 转换成二进制流的，使用 xhr.sendAsBinary（）发送二进制流，，测了一部分常见机型，可以实现，具体是否可以在项目中使用还有待论证。二进制上传实现部分代码仅供参考：
var uploadFile = function(fileid, file) {
var xhr = new XMLHttpRequest(),
fd = new FormData(),
url = "/picture/upload",
// 上传进度
uploadProgress = function(evt) {
if (evt.lengthComputable) {
var percent = (evt.loaded * 100 / evt.total).toFixed(1);
// show percent
console.log("unable to compute");
uploadFailed = function(evt) {
// 上传失败
uploadCanceled = function(evt) {
// 取消上传或网络连接断开！
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", url, true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status === 200) {
var data = xhr.
if (data != 0) {
// 上传失败
// 上传成功
// 上传失败
fd.append(fileid, file);
xhr.send(fd);
实现二：base64 上传
需求 1、2、3、5、6 皆可实现，实现此种方式即基本的 Get 上传，但是无法实时监控上传文件进度，需求 4 无法实现。
实现三：二进制+base64
即上述两种方案的综合。也可参考此文中的实例。
四、问题总结：
M 端浏览器各异，支持情况各异，现总结如下：
a) 部分酷派机型浏览器（微信、UC、QQ、百度）,中兴自带浏览器不支持 input[type=file]；
解决方式：放弃
b) Adroid 机型，不同浏览器对 input[type=file]支持不同，有的没有图库选项，有的没有相机选项。主要表现为小米、酷派部分机型的微信自带浏览器。
解决方式：input[type=file]添加 accept='image/*'属性，可实现某些 adriod 机型不出现文档选项。
c) 上传文件时，出现图片自动旋转的问题
解决方式：实现开源插件 CanvasResize 中 exif.js 来纠正，实现此插件可解决压缩、纠正图片旋转，但 Adroid 上 UC 浏览器中会出现下图问题：（国外人写的插件哪会管国内浏览器死活！）
最后采用的腾讯的一款压缩方案，解决了 UC 浏览器的问题。
d) 使用压缩插件时需注意，PNG 图片压缩时往往会偏大，可把压缩成 image/jpeg 格式；
var cvs = document.createElement("canvas");
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL("image/jpeg", quality / 100);
f) 因浏览器对 input[type=file]显示风格各异，项目使用 label 的 for 指向 input[type=file]的 id，并设置 input{display:none};在 Adroid 部分浏览器上点击无反应；
解决方式：
设置 input{position: top: -999} 来隐藏。
# update start
使用label标签for属性触发input[type=file]需要注意的一些问题：
label 的 for 指向的是 input[text/radio/checkbox/date]等元素 trigger 的是 focus 事件，而指向 input[file]元素 trigger 的是 click 事件，因此可以打开一个浏览器窗口，这就是我们使用 label 的 for 指向 input[file],使用 zepto 的 tap 事件绑定时，不会触发的原因。
给 input[type=file]设置 display: none or visibility: hidden 将不会工作，因为表单提交时 input 的值不会被发送到服务端。除上面解决的 top:-999也可以使用以下 CSS 来设置隐藏：
input[type=file] {
width: 0.1
height: 0.1
opacity: 0;
z-index: -1;
你可能会有疑问，这里为什么不把宽高设置为 0 而为 0.1px。设置为 0 在一些浏览器 tab 页可能不会被解析。同时设置 position：absolute 属性来使其脱离标准流，不会影响其他元素的布局。
如是想，使用 label 标签的 for 属性，我们就可以使用 CSS3 各种属性来 DIY 按钮各种样式及效果了，不是吗？
同时可以设置当 input[file]focus 时，label 的 outline 样式：
.input[type=file]:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5
Firefox 中对:hover,:active 支持良好，当时会忽略 input[type="file"]:focus 设置，但是 Firefox 对 input[file]支持 focus、blur 事件，我们可以通过 JS 来增加和删除类 has-focus 来实现：
```javascript
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
.inputfile:focus + label,
.inputfile.has-focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5
3. input[file]多选（multiple），现在多选在移动端和PC端支持都不太好，PC端IE9及以下浏览器不支持该属性；移动端andriod系统某些自带浏览器、UC浏览器支持情况各异。
# update end
g) 在部分Adroid支持input[type=file]的浏览器中，当使用/image/.test(file.type)时，选择图片文件会返回false。使用JSON.stringify(file)分析后发现，是file对象中的name字段中没有包含后缀，同时type字段为空，使用this.value获取路径中也没有包含后缀。因此过滤出现问题。
如下结果：
{"webkitRelativePath":"","lastModified":0,"lastModifiedDate":"T04:03:34.000Z",
"name":"fanmian","type":"","size":2273852}
正常结果如下：
{"webkitRelativePath":"","lastModified":0,"lastModifiedDate":"T04:03:34.000Z",
"name":"fanmian.png","type":"image/png","size":2273852}
解决方式：放开/image/.test(file.type)过滤，在压缩时，抛出错误过滤。
h) html5上传文件，Firefox支持重复选择同一文件，其它浏览器不支持
解决方式：每次选择文件后给input[type=file]赋值空。
input[type=file]控件比较特殊：
对于ios，已实现file，ios7版本之前，可以唤起照片集里的图片文件；ios7后，实现了拍照和录像的功能。不过在7.0.3里有bug，程序会闪退；
对于andriod，如果使用的是浏览器，file类型的文件选择，会唤起浏览器实现的文件选择，不过文件的选择，不同的手机，具体实现不同，web无法控制。如果在android app里使用webkit的方式，需要android的webkit实现私有api接口，才能实现file选择上传。
五、移动端 input[type=file]浏览器兼容列表
input[type=file]控件在M端浏览器支持情况(部分机型)
by qianqian and xiaocui of my team updated at
测试浏览器
是否支持拍照
是否支持从相册选择
微信浏览器
手机自带浏览器
微信浏览器
手机自带浏览器
微信浏览器
手机自带浏览器
iphone6 plus
微信浏览器
手机自带浏览器
小米手机2S
微信浏览器
手机自带浏览器
小米手机M4
微信浏览器
手机自带浏览器
微信浏览器
手机自带浏览器
三星SM-G5308W
微信浏览器
手机自带浏览器
微信浏览器
手机自带浏览器
微信浏览器
手机自带浏览器
华为PE-TL10
微信浏览器
手机自带浏览器
酷派8675-A
微信浏览器
手机自带浏览器
六、参考链接：
下面是「FED实验室」的微信公众号二维码，欢迎扫描关注：
行文不易，如有帮助，欢迎打赏！
oror分享 (0)&script type = "text/javascript"&
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL;// return dataURL.replace("data:image/base64,", "");
function main() {
var img = document.createElement('img');
img.src = 'logo.png';
img.onload =function() {
var data = getBase64Image(img);
console.log(data);
document.body.appendChild(img);
打开浏览器控制台，会看到输出的base64编码
&input id="upLoad" type="file" multiple accept="image/png,image/jpg/image/gif"/&
var eleUpload = document.getElementById("upLoad")
eleUpload.addEventListener("change",function(evt){
var files = evt.target.files
var tImgFile = files[0]
var reader = new window.FileReader();
reader.onload = function(e){
var base64 = e.target.result
reader.readAsDataURL(tImgFile)
用法很简单
img.src = 'data:image/base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';或者
background-image: url("data:image/base64,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");
js 将图片转换为base64编码
在写爬虫程序的时候，网站采用了验证码防爬取策略，这里需要将验证码图片转换成base64编码提交到第三方网站进行验证/**
* 将图片转换为Base64
function image2Base...
js将图片转为base64编码 && js将base64编码图片转为Blob格式
将图片转为base64编码格式function convertImgToBase64(url, callback, outputFormat){
var canvas = document.cre...
使用JS解析成base64编码再输出图片
document.getElementById(&live&).onchange = function () {
base64编码与图片之间相互转换
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一
一、将base64转换成图片
只需要在img 标签中引入即可，注意要加上标明前缀（data:image/base64），否...
将图片转换成base64 在前端使用&img&标签显示出来
Java 端代码 根据图片绝对路径获取图片的base64编码 public static String getImageStrFromPath(String imgPath) {
获取图片base64编码的几种方法
前文中我们聊了 Data URI 和 base64编码，稍微回顾下。base64编码 是将数据用 64 个可打印的字符进行编码的方式，任何数据底层实现都是二进制，所以都可以进行 base64编码，ba...
将图片转成二进制并生成Base64编码，可以在网页中通过url查看图片
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前...
从零开始学_JavaScript_系列（36）——base64字符串与图片的相互转换
base64字符串转图片原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。而若要下载，则
创建一个新的a标签
将a标签的href属性设置为该base64字符串
设置a标...
原生JS实现base64解码与编码
什么是base64base64是用规定的64种字符来表示任意二进制数据的一种编码格式，而且这64种字符均是可见字符，而之所以要是可见的是因为在不同设备上处理不可见字符时可能发生错误。通常，电子邮件数据...
JS图片转Base64
网络上有很多片介绍通过js将图片转换成base64的文章，之所以再写这篇文章的原因时发现没有找到系统的介绍的文章，有的介绍如何实现本地项目的图片转码，有的介绍如何实现网络资源的图片转化，但是系统介绍的...
没有更多推荐了，