利用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属性,手机上没差