android h5图片预览,移动端h5实现拍照上传图片并预览

60 阅读 0 评论 40 点赞

我是靠谱客的博主典雅大白，最近开发中收集的这篇文章主要介绍android h5图片预览,移动端h5实现拍照上传图片并预览，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

.移动端实现图片上传并预览，用到h5的input的file属性及filereader对象；经测除了android上不支持多图片上传，其他基本ok实用；

一：先说一下单张图片上传(先上代码)：

html结构(含多张图片容器div)：

点击添加图片

css样式(由于默认file样式实在不好看，自定义透明覆盖改变了样式ps含多张图片容器div)：

2 #fileBtn{width: 100px;height: 100px; position: absolute;display: block;top: 0;left: 0;opacity: 0;}3 .fileBtn{width: 100px;height: 100px;border: 2px dashed lightskyblue;text-align: center;position: relative;left: 50px;top: 50px;}4 .fileBtn p{line-height: 60px;}5 #img{width: 100px;height: 100px;position: absolute;top: 0;left: 0;z-index: 10;display: none;}6 .img{width: 100px;height: 100px;}7 .img-box{margin-top: 80px;}8

js代码：</