上传头像功能

利用input标签--file属性

<img src="images/trainlogo.png" alt="" class="trainlogo" id="touxiang">

<input type="file" name="" value="" class="trainlogo_sel" accept="image/*" multiple>

将input定位在图片标签上，透明度为0

input--file可以调用本地相机、摄像机、录音功能，

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

其中还有一个属性，multiple，支持多选，其优先级最高，如果写了multiple，那么camera什么的就没用了噢

获取选择到的图片代码如下：

//上传头像
function readURL(input) {
　　if (input.files && input.files[0]) {
　　　　var reader = new FileReader();
　　　　reader.onload = function (e) {
　　　　　　$('#touxiang').attr('src', e.target.result);
　　}
　　reader.readAsDataURL(input.files[0]);
　　}
}
$(".trainlogo_sel").change(function(){
　　readURL(this);
});

//2017.05.11补充

可以不写accept和capture属性，手机上没差

 

转载于:https://www.cnblogs.com/ZLHF/p/6767153.html