转自【B5教程网】:http://www.bcty365.com/content-142-5244-1.html

这次分享一个简易的上传头像示例，其大致流程为：

一、将选择的图片转为base64字符串

function preview(file) {//预览图片得到图片base64 
        var prevDiv = document.getElementById('preview'); 
        if (file.files && file.files[0]) { 
            var reader = new FileReader(); 
            reader.onload = function(evt){ 
                prevDiv.innerHTML = ''; 
            } 
            reader.readAsDataURL(file.files[0]); 
        } else { 
            prevDiv.innerHTML = '

'; 
        } 
    } 
上面的方法可将选择的图片转为base64预览，此时可以打桩看看base64到底是什么东东。

二、根据（阿里云）上传要求，对该图像base64去头等处理

var binaryblob = function (s, type) {//blob对象 
                    var byteString = atob(s); 
                    var array = []; 
                    for (var i = 0; i < byteString.length; i++) { 
                        array.push(byteString.charCodeAt(i)); 
                    } 
                    return  new Blob([new Int8Array(array)], {type: type}); 
                }; 
var binaryPictureBlob = function (dataUrl, filterHead) {//上传base64去头 
                    var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl; 
                    return binaryblob(s, "image/jpeg"); 
                }; 
此时将base64去头等处理后返回一个blob对象用于上传阿里云。以上方法最好写在service、factory里，以后有图像上传需求时方便直接调用,尽量不要写在controller内。

三、第一次请求
 
$scope.save=function(){//保存 
    var pic=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了，好好欣赏靓照吧！

最后附上完整代码，望指教！
友情提示：在复制代码测试时请求参数自己加上哦！

<style>

div{text-align:center;border:1px solid #ddd;}

button,div{margin:10px auto}

button{border:0;width:200px;height:30px;line-height:30px;font-size:1pc;color:#333;background-color:#0ff;cursor:pointer;border-radius:5px}

button:hover{background-color:#db7093}

#preview,.show-img{width:200px;height:200px;}

#preview img,.show-img img{width:100%;height:100%;}

.file{position:relative;display:block;width:200px;height:30px;line-height:30px;background:#9acd32;border-radius:5px;margin:10px auto;overflow:hidden;color:#1e88c7;text-decoration:none;text-indent:0}

.file input{position:absolute;font-size:75pt;right:0;top:0;opacity:0}

.file:hover{background:#aadffd;border-color:#78c3f3;color:#004974;text-decoration:none}

</style>

</head>

<body>

<div ng-controller="photos">

<a href="javascript:;" class="file">

<span>选择文件</span>

<input type="file" onchange="preview(this)" />

</a>

<button class="save" ng-click="save()">保存</button>

<h2>头像预览</h2>

<div id="preview"></div>

<h2>上传成功后展示头像</h2>

<div class="show-img">

<img ng-src={{imgSrc}} alt=""/>

</div>

</div>

<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script>

function preview(file) {//预览图片得到图片base64

var prevDiv = document.getElementById('preview');

if (file.files && file.files[0]) {

var reader = new FileReader();

reader.onload = function(evt){

prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';

}

reader.readAsDataURL(file.files[0]);

} else {

prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

}

}

//以上代码最好写在service或factory里

angular.module('webPhotos',['ng'])

.controller('photos',function($scope,$http){

var binaryblob = function (s, type) {//blob对象

var byteString = atob(s);

var array = [];

for (var i = 0; i < byteString.length; i++) {

array.push(byteString.charCodeAt(i));

}

return new Blob([new Int8Array(array)], {type: type});

};

var binaryPictureBlob = function (dataUrl, filterHead) {//上传base64去头

var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;

return binaryblob(s, "image/jpeg");

};

$scope.save=function(){//保存

var pic=binaryPictureBlob($('#preview img').attr('src'),true);//调用该方法得到上传数据

$http({//接口参数

url:'',

method:'',

headers:{},

data:{}

}).success(function(data){//此时上传到本地服务器成功，实际上只是上传了与此图片有关的标记，图片信息还未上传

$http({

method:'PUT',

url:data.UrlForPut,//上传到本地服务器已经生成地址，但要上传到阿里云后地址才生效有上传的图像显示

headers: {

'Content-Type':' ',//避免阿里云上传时报错或者根据阿里云要求上传header

},

data:pic//图像base64字符串去头等处理后的图片信息

}).success(function(data2){//将图像信息从服务器上传到阿里云

$scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接

}).error(function(err2,header2,config2,status2){//处理响应失败

console.log(err2,header2,config2,status2);

});

}).error(function(err1,header1,config1,status1){//处理响应失败

console.log(err1,header1,config1,status1);

})

}

})

</script>

</body>

</html>

html5 上传头像示例及其注意事项的更多相关文章

  1. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

    写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]v ...

  3. 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

    HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...

  4. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  6. jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）

    这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...

  7. JavaWeb -- 文件上传下载示例

    1. 上传简单示例 Jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  8. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  9. swift上传头像

    很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){  //上传头像 / ...

随机推荐

  1. 使用OpenSSL生成CSR文件，并申请全球通用SSL证书

    http://www.openssl.org 上只有OpenSSL的原代码下载,为了方便Windows用户使用OpenSSL,我们特地为您准备了OpenSSL 0.9.8.a for win32的可执 ...

  2. C语言循环中降低推断——————【Badboy】

    为了让编译器更好地优化循环,应该尽量让循环中降低推断,方法之中的一个是将推断语句整合进表达式.还是这个样例: for (int i = 0; i < 1000*10; i++) { sum += ...

  3. 《DirectX 9.0 3D游戏开发编程基础》必备的数学知识 读书笔记

    最近在看游戏导航源码,但是看了几天感觉看不懂.里面全是一些几何运算,以及一些关于3d方面的知识.发现自己缺少3d这方面的知识,正好也想研究一下3d游戏开发的基本原理,于是决定买本书看看了,后来在ope ...

  4. C# Soap调WebService

    public class WebServiceHelper { /// <summary> /// Soap协议Post方法 /// </summary> /// <pa ...

  5. java.lang.ClassCastException: java.util.ArrayList cannot be cast to java.util.Map

    1.错误描写叙述 java.lang.ClassCastException: java.util.ArrayList cannot be cast to java.util.Map at servic ...

  6. springboot学习（八） 使用jpa访问数据库

    1.添加maven依赖 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connecto ...

  7. Centos中配置环境变量

    以Java的开发环境Jdk为例. 将jdk-9.0.1放置在/usr/local下(UNIX规范),然后我们将jdk配置到环境变量中去. $ mv jdk- /usr/local $ vim /etc ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. Atitit.cateService分类管理新特性与设计文档说明v1

    Atitit.cateService分类管理新特性与设计文档说明v1 1. V2 新特性规划1 2. 分类管理1 3. 分类增加与修改维护2 4. Js控件分类数据绑定2 1. V2 新特性规划 增加 ...

  10. less css下载及编绎工具

    http://www.lesscss.net less.js下载 LESS 1.5已经放出Beta 1版本,支持source map等新特性,欢迎尝鲜.详细变更请见更新日志. 生产环境使用建议下载1. ...