首页 > 代码库 > MUI 拍照或选取照片上传作为头像

MUI 拍照或选取照片上传作为头像

2024-08-21 11:51:41   220人阅读

1.第一种方法是用H5来实现的

　　HTML：

　　<label>

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

　　　　<img id="headimg" src="http://www.mamicode.com/img/erma_search_goods_detail.png">

　　</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、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性再加入，无效；
　　　　　　　　// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
　　　　　　　　imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
　　　　　　　　imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = http://www.mamicode.com/dataURL;
　　　　　　}
　　　　});

　　})

　　说明：1）外部加个label是为了把让用户点击的时候在范围内的都会触发input

　　　　　2）H5  input file上传图片，调用API:<input type="file" accept="image/*;capture=camera">直接调用相机
　　　　　　　　　　　　　　　　　　　　　　 <input type="file" accept="image/*" />调用相机、图片或者相册

　　　　　　　注：部分android机只能调用本地相册，相机调用不了或者只能调用相机，不能调用相册。

　　　　　3）此方法是网上的一种方法，做了兼容的，IE6以上都能正常运行。

 

2.第二种方法：MUI 

　　1）内容链接：http://www.bcty365.com/content-146-3648-1.html

　　2）需要改一下  点击头像触发   里的技术分享拍照触发的对象的ID名改成自己的就行了。

 

　　　　还需要修改一下   上传图片  里的一点代码就可以用了：

　　　　var mainImage= document.getElementById("headimg");

　　　　mainImage.src = http://www.mamicode.com/imgPath;

 

　　　　说明：技术分享这一部分改成上面的那两句就可以了，因为我原来放图片的地方设置有宽高，mainImage给它一个装图片的对象就行了。

 

 　　

 

MUI 拍照或选取照片上传作为头像


联系
我们