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”屬性會為true
if($(‘#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");    }};

 

ZH乳酪：AngularJS/JavaScript上傳圖片【PC端】