最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery上传头像示例与注意点
时间：2016-12-14 编辑：简简单单 来源：一聚教程网
这次分享一个简易的上传头像示例，其大致流程为：
一、将选择的图片转为base64字符串
上面的方法可将选择的图片转为base64预览，此时可以打桩看看base64到底是什么东东。
二、根据（阿里云）上传要求，对该图像base64去头等处理
|
1
2
3
4
5
6
7
8
9
10
11
12
|
varbinaryblob =function(s, type) {//blob对象
varbyteString = atob(s);
vararray = [];
for(vari = 0; i < byteString.length; i++) {
array.push(byteString.charCodeAt(i));
}
returnnewBlob([newInt8Array(array)], {type: type});
};
varbinaryPictureBlob =function(dataUrl, filterHead) {//上传base64去头
vars = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/,"") : dataUrl;
returnbinaryblob(s,"image/jpeg");
};
|
此时将base64去头等处理后返回一个blob对象用于上传阿里云。以上方法最好写在service、factory里，以后有图像上传需求时方便直接调用,尽量不要写在controller内。
三、第一次请求
|
$scope.save=function(){//保存
varpic=binaryPictureBlob($('#preview img').attr('src'),true);//调用该方法得到上传数据
console.log(pic);
$http({//接口参数
url:'',
method:'',
headers:{},
data:{}
}).success(function(data){
console.log(data);
//这里讲进行第二次请求
}).error(function(err1,header1,config1,status1){//处理响应失败
console.log(err1,header1,config1,status1);
})
}
|
点击保存按钮后第一次请求是上传到本地服务器，实际是上传一些该图像的标记等信息。上传成功后会返回一个该图像对应的阿里云地址和一个阿里云上传图像的地址，此时该图像地址暂不可用。
四、第二次请求
|
$http({
method:'PUT',
url:data.UrlForPut,
headers: {
'Content-Type':' ',
},
data:pic//图像base64字符串去头等处理后的图片信息blob
}).success(function(data2){
$scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接
}).error(function(err2,header2,config2,status2){//处理响应失败
console.log(err2,header2,config2,status2);
})；
|
注意：
- 此时请求的url是第一次请求返回的一个固定地址（我这里是--data.UrlForPut）。
- 头部信息处避免阿里云上传时报错写成'Content-Type':' '或者根据阿里云要求上传header。
- 第二次请求成功后图片的地址是第一次返回的该图像的地址（此处是个大坑，data.Url不要写成data2.Url了）。
五、此时应该都ok了，好好欣赏靓照吧！
最后附上完整代码，望指教！
友情提示：在复制代码测试时请求参数自己加上哦！
|
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31