ZH奶酪：AngularJS/JavaScript上传图片【PC端】

【功能介绍】

类似与修改个人信息的时候，点击头像，就可以完成选择照片、上传照片等步骤达到替换头像的目的。

【运行流程】

（1）点击头像

（2）选择头像

（3）点击“完成”，上传头像

1.HTML图片部分的代码（个人信息还会包含姓名[id="name"]、介绍[id="intro"]元素等）

<div>
    <img id="avatar"ng-src="{{avatar}}" ng-click="choosePicMenu()">
</div>
<input ng-hide="true" type="file" id="photoBtn" accept="image/*"onchange="picChange(event,‘avatar‘)"/>

2.js核心代码

（1）选择图片

//点击图片，向id=“photoBtn”的元素发送click()事件，打开文件选择窗口，选择图片$scope.choosePicMenu = function() {
                $(‘#photoBtn‘).click();
            }

//选择完图片之后，该input元素发生了change，激活onchange属性，执行picChange(event,‘avatar‘)函数//其中event指这个onchange事件，event.target指发生这个事件的元素，关于event更多介绍，请点：传送门function picChange(event,imgId){
    var files = event.target.files;
    if(files && files.length >= 1){
        var file = files[0];　　　　 //loadImage是javaScript插件javascript-load-image(传送门)中的功能
        loadImage.parseMetaData(
            file,
            function (data) {
                if (!data.imageHead) {
                    loadImage(
                        file,
                        function (img) {
                            var URL = window.URL || window.webkitURL;
                            var imgURL = img.toDataURL("image/png");
                            $(‘#‘+imgId).attr(‘src‘, imgURL);
                            $(‘#‘ + imgId).attr(‘data-change‘, 1);
                        },
                            {maxWidth: 600,
                            canvas: true} // Options
                    );
                    return;
                }
                // Combine data.imageHead with the image body of a resized file
                // to create scaled images with the original image meta data, e.g.:
                // get orietation info.
                if (data.exif && data.exif[0x0112]) {
                    var orientation = data.exif[0x0112];
                    loadImage(
                    file,
                    function (img) {
                        var URL = window.URL || window.webkitURL;
                        var imgURL = img.toDataURL("image/png");
                        $(‘#‘+imgId).attr(‘src‘, imgURL);
                        $(‘#‘ + imgId).attr(‘data-change‘, 1);
                    },
                        {maxWidth: 600,
                        canvas: true,
                        orientation:orientation} // Options
                    );
               } else {
                       loadImage(
                    file,
                    function (img) {
                        var URL = window.URL || window.webkitURL;
                        var imgURL = img.toDataURL("image/png");
                        $(‘#‘+imgId).attr(‘src‘, imgURL);
                        $(‘#‘ + imgId).attr(‘data-change‘, 1);
                    },
                        {maxWidth: 600,
                        canvas: true} // Options
                    );
               }
            }
        );
    }
}

（2）上传图片

//新建一个FormData对象var fd = new FormData();//如果修改了图像，id=“avatar”的元素的“data-change”属性会为trueif($(‘#avatar‘).attr(‘data-change‘)){
    var files = document.getElementById(‘photoBtn‘).files;
    if(files && files.length >= 1){
        fd.append(‘ffile‘,files[0]);//把图像添加到formData对象中
    }
}
//获取姓名、介绍等其他元素
var name = $(‘#name‘).val();
var intro = $(‘#intro‘).val();
if(name){
    fd.append(‘name‘,name);
}
if(intro){
    fd.append(‘introduction‘,intro);
}//使用XMLHttpRequest对象发送请求
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", $scope.updateComplete, false);
xhr.open("POST", "some url");
xhr.send(fd);

$scope.updateComplete = function(evt){
    var resp = evt.target.responseText;
    var respJson = $.parseJSON(resp);
    if(respJson.status == 0){
        console.log("success!");
    }else{
        console.log("fail");
    }
};