MUI take pictures or choose photos to upload as Avatar

1. The first method is implemented using H5

Html:

<label>

<input style= "opacity:0;" type= "File" accept= "image/*" id= "Head_img_change"/>

</label>

Js:

$ (function () {

$ ("#head_img_change"). Change (function () {
var $file = $ (this);
var fileobj = $file [0];
var windowurl = window. URL | | Window.webkiturl;
Var Dataurl;
var $img = $ ("#headimg");
if (fileobj && fileobj.files && fileobj.files[0]) {
Dataurl = Windowurl.createobjecturl (Fileobj.files[0]);
$img. attr (' src ', dataurl);　　　　　　　　
}else{
Dataurl = $file. val ();
var imgobj = document.getElementById ("headimg");
//1, when setting the Filter property, the element must already exist in the DOM tree, the dynamically created node, also need to be added to the DOM before setting the property, first set the property to join, invalid;
//2, the SRC attribute needs to be added as follows, two of the above　　　　　　　　method added, invalid;
ImgObj.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale)";
ImgObj.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = dataurl;
}
});

})

　　description : 1) Add a label externally to trigger input in the range when the user clicks

2) H5 input file upload image, call api:<input type= "file" accept= "Image/*;capture=camera" > Call camera directly
<input type= "File" accept= "image/*"/> Call camera, picture or album

Note: Some Android phones can only call local albums, the camera can not call or only call the camera, cannot call album.

3) This method is a method on the net, does the compatibility, IE6 above all can run normally.

2. Second method: MUI

1) Content Link: http://www.bcty365.com/content-146-3648-1.html

2) You need to change the ID name of the trigger object in the avatar trigger to change it to your own.

Also need to modify the upload image in a little bit of code can be used:

　　　　var mainimage= document.getelementbyid ("headimg");

MAINIMAGE.SRC = Imgpath;

　　　　explanation : This part changed to the above two sentences, because I originally put the picture of the place has wide height, mainimage give it a picture of the object on the line.

MUI take pictures or choose photos to upload as Avatar