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'});
}