input的妙用

项目里有一个功能是做文件上传,功能特别简单,不想用现成的npm库,一来体积臃肿影响性能,二来功能太复杂了;
先是爬了网上各种贴基本上都不够完整,左搬右拿之后搞出一个能用的。

记录下input标签妙用,顺便感受对象的魅力。

1
<input id="input" type="file" accept="" onchange="change()">

一切皆对象,又想起了网上那句调侃,没有对象怎么办, new一个 /笑哭脸

1
2
3
4
5
6
7
function change(){
var file = input.files[0];
var formData = new FormData();
formData.append('type', file.type);
formData.append('file', file);
// 调用接口post上传
}

这里边还有个坑

input在选过文件之后会有状态保存,会导致重新选文件不触发change事件
所以每次上传之前要清空一下,或者调用异步接口上传成功后顺便清空一下

更新一下,顺便添加一下input对象模型的方法

1
2
3
4
5
6
7
8
9
10
11
12
var file = source.files[0];
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
// submit提交
$('#upload').click();
document.getElementById("pic").src = e.target.result;
// 压缩图片
// cutImageBase64(e.target.result, 300, 0.5);
};
fr.readAsDataURL(file);
}

base64图片转file文件提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){

var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte

//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}

return new Blob( [ab] , {type : 'image/png'});
}

base64压缩图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function cutImageBase64(imgSrc,wid,quality) { //压缩上上传图片
var img = new Image();
img.src = imgSrc;
img.onload = function() {
var that = this;

//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;

//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({ width: w, height: h });
ctx.drawImage(that, 0, 0, w, h);

// 生成base64
base64 = canvas.toDataURL('image/jpeg', quality || 0.6);

};
}