css上传头像代码,JS上传头像代码示例

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var oInput = document.getElementById("input");

oInput.addEventListener("change", uploadImg);

function uploadImg(e) {

let $target = e.target || e.srcElement;

let file = $target.files[0];

if (!/image\/\w+/.test(file.type)) {

alert("image only please.");

return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e) {

var img = new Image,

width = 640, //image resize

canvas = document.createElement("canvas"),

drawer = canvas.getContext("2d");

img.src = this.result;

img.onload = function() {

canvas.width = width;

canvas.height = width * (img.height / img.width);

drawer.drawImage(img, 0, 0, canvas.width, canvas.height);

temp_avatar = canvas.toDataURL("image/jpeg"); //上传的头像文件 包含data URL 的DOMString。

console.log(temp_avatar);

var temp_file = dataURLtoFile(temp_avatar, 'avatar.png'); //data RUL转成file进行判断大小

var size = temp_file.size;

if (size > 5 * 1024 * 1024) {

setTimeout(function() {

console.log("图片过大");

}, 1000);

return;

}

console.log("OK"); //此处可以进行文件上传操作

}

}

}

function dataURLtoFile(dataurl, filename) {

var arr = dataurl.split(','); //data:image/jpeg;base64 /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCA........

var mime = arr[0].match(/:(.*?);/)[1]; //image/jpeg

var bstr = atob(arr[1]); //解码为ASCII

var n = bstr.length;

var u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n); //获取指定位置的uniCode码

}

return new File([u8arr], filename, {

type: mime

});

}