介绍 & lt;输入类型=癴ile"在 btoa (“javascript");//癮mF2YXNjcmlwdA==?
atob (“amF2YXNjcmlwdA==?;//癹avascript" btoa (encodeURIComponent(“我喜欢javascript"));//癑UU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA==?
decodeURIComponent (atob (“JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA==?);//拔蚁不秊avascript"
FormData: & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,最大范围=1.0,user-scalable=0“比;
& lt; title> Document
https://www.yisu.com/zixun/& lt;脚本src=" http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js ">
.uploadPic {
宽度:92%;
位置:相对;
保证金:0汽车;
高度:2.8快速眼动;
行高:2.8快速眼动;
字体大小:1.3快速眼动;
border - radius: 4 px;
颜色:# fff;
text-align:中心;
background - color: # 72 bcc5;
}
.uploadPic>输入{
位置:绝对的;
显示:块;
宽度:100%;
高度:100%;
右:0;
上图:0;
透明度:0;
}
.uploadPic> img {
边界:没有;
}>
身体
<脚本>
上传功能(文件、回调){
var加载=0;
var总=file.size;
如果(window.FileReader) {
$(" #进步”)[0]value=0;
var fileReader=new fileReader ();
fileReader。onload=function () {
console.log (fileReader.readyState);//读取完成
compressPic (this.result回调)
}；
fileReader。onerror=function () {
console.log (fileReader.error);
}；
fileReader。onprogress=function (e) {
console.log (fileReader.readyState);//读取中
加载+=e.loaded;
$(" #进步”)[0]。值=(加载/总数)* 100;
}
console.log (fileReader.readyState);//未读取
fileReader.readAsDataURL(文件)
其他}{
alert("您的浏览器不支持FileReader”);
}
}
函数base64ConvertToBlob (picData、类型、大小){
类型=| | ";
尺寸大?| | 512;
var decodeFileData=atob (picData);//此处用atob解码,转码函数btoa。在使用方法时注意操作中文时,需对中文decodeURIComponent转换
var dataArray=[];
var len=decodeFileData.length;
(var=0;我<兰;我+=大小){
var pieceData=decodeFileData。片(我+大小);//这里做了一个512的分组
var arr=new Array (pieceData.length);
(var j=0;j 标准| |高度>标准){
var=数学。马克斯(宽/标准,高度/标准);
宽/=率;
高度/=率
}
画布var=document.createElement(“画布”);
画布。宽度=宽度;
画布。身高=身高;
var=canvas.getContext上下文(2 d);
上下文。fillRect(0, 0,画布。宽度,canvas.height);
上下文。drawImage (img, 0, 0,宽度、高度);
var data=画布。toDataURL(“图像/jpeg ", 1);//var blobData=base64ConvertToBlob (data.replace (^ . * ?," ")/图像/jpeg)//- - - - - -需要去掉符号,不然使用atob方法报的错//doAjax(新FormData () .append(“形象”,数据));//后续可以这样做,转换成Blob字段,组装FormData,发送至后台
控制台。日志(“画布压缩后大小:”+ data.length);
回调(数据)
}；
img.src=picData;
控制台。日志(“画布conpress大小:”+ picData.length);
}
$ (" # uploadPic输入”).change(函数(){
var文件=this.files [0];
上传(文件,函数(picData) {
$ (" # uploadPic img”) [0]。src=picData;//预览
}
);
});>
小编给大家分享一下使用H5做出上传图片功能的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
<代码> Blob
拍摄
