html页面中拍照和上传照片那些事儿（一）

本文为原创，转载请注明出处： cnzt-p

http://www.cnblogs.com/zt-blog/p/6709037.html 

 

一. 思路：

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

 

二. 原始效果：

　该标签在页面的原始效果如下（选择文件按钮），PC端点击会出现图片选择对话框。这里没有添加任何css代码，很丑。没关系，我们的案例中会做个漂亮一点点的~

　　PC chrome（其他效果差不多）：

　　

 

　　iOS safari：

　　

 

　　Android:

　　并没有。。。。。。安卓手机

 

三. 兼容性：

　PC browsers -- 选择本地图片

　iOS -- 可以从图库选择或者拍照

　Android -- 可以选择图库或者文件管理。一句话，安卓之大，无奇不有，各种文件目录啊。。。

　补充20170421：安卓的拍照功能可以通过app端改变接口实现。

 

四. 用法：

1 　document.getElementById("imgUpload").onchange = function(e){
2 　　　console.log(e);
3 　　　var file = e.target.files[0];
4 
5 　　　console.log(file );
6 　}

View Code