ZH cheese: angularjs/javascript upload picture "PC Side"

"Introduction to Features"

Similar to the modification of personal information, click on the avatar, you can complete the selection of photos, upload photos and other steps to achieve the purpose of replacing the avatar.

"Run Process"

(1) Click the Avatar

(2) Select Avatar

(3) Click "Done" to upload your avatar

1.HTML Image section of the code (personal information will also include the name [id= "name"], Introduction [id= "Intro"] element, etc.)

 
 
<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 Core Code

(1) Select picture

 
//Click on the picture, send the click() event to the element id = "photobtn", open the file selection window, and select the picture
$scope.choosePicMenu = function() {
$(‘#photoBtn‘).click();
}
//After selecting the image, the input element changes. Activate the onchange attribute and execute the picchange (event, 'Avatar') function
//Where event refers to the onchange event, and event.target refers to the element where the event occurs. For more information about event, please click: portal
function picChange(event,imgId){
var files = event.target.files;
if(files && files.length >= 1){
var file = files[0];
//Load image is a function of the JavaScript plug-in 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) Uploading images

//Create a new formdata object
var fd = new FormData();
//If the image is modified, the "data change" attribute of the element id = "Avatar" will be true
if($(‘#avatar‘).attr(‘data-change‘)){
var files = document.getElementById(‘photoBtn‘).files;
if(files && files.length >= 1){
FD. Append ('ffile ', files [0]); / / add the image to the formdata object
}
}
//Get name, introduction and other elements
var name = $(‘#name‘).val();
var intro = $(‘#intro‘).val();
If (name) {
fd.append(‘name‘,name);
}
If (Intro) {
fd.append(‘introduction‘,intro);
}
//Sending a request using the XMLHttpRequest object
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 cheese: angularjs/javascript upload picture "PC Side"