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代码：

1 //单张图片上传

2 functionupload(){3 var $c = document.querySelector("#fileBtn");//上传出发按钮

4 var $d = document.querySelector("#img");//图片容器

5 var file = $c.files[0];//获取file对象单张

6 var reader = new FileReader();//创建filereader对象

7 reader.readAsDataURL(file);//转换数据

8 reader.onload = function(e){//加载ok时触发的事件

9 console.log(file);10 $d.setAttribute("src", e.target.result);//给图片地址,显示缩略图

11 $d.style.display="block";//样式显示

12 };13 };

效果图(pc端截图，没截移动端的，参考下就好；移动端也是ok的)：

二：多张图片上传(android不支持)：

只需将在方法里改变将file全部获取并遍历；(这里还可限制上传数量就没写了；)

1 //多张图片

2 functionuploadm(){3 var $c = document.querySelector("#fileBtn");//上传出发按钮

4 var $d = document.querySelector(".img-box");//图片容器

5 var file = $c.files; //获取file对象,并进行遍历

6 console.log(file.length);7 for(var i=0;i

然后注意把input的multiple属性加上；

欢迎纠正和更好方法；

原文：http://www.cnblogs.com/sheqiuluo/p/7061278.html

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

安卓端调用相机拍照返回并预览---清晰原图
安卓端调用相机拍照并返回预览图片一.demo预览二.xml代码和activity简单代码描述. 三.老规矩再来写几个转换工具方法继之前写的安卓调用相机拍照返回预览,如果对于画质要求不高的话可以考 ...
移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
test(){ // let aa = this.$refs.input1.blur(); // this.$nextTick((x)=>{ //正确写法 // // this.$refs.in ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
js调用android相册,【方法】移动端H5如何调用相册和相机上传图片、音频、视频...
在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传. <一>常用属性值: 1.accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 ...
什么叫h5项目_对移动端h5项目的一点总结
到现在也做了不少的h5,遇到了不少的坑,也对曾经的经验教训总结一下到现在也做了不少的h5,遇到了不少的坑,也对曾经的经验教训总结一下. 主要做过的项目有: 每个项目都有这样那样的难点,现在都分别总结 ...
java 支付宝h5网页支付接口,移动端h5网页调用支付宝支付接口
领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气.这个支付好像没我啥事儿啊!小伙伴儿们自行查看:https://opendocs.alipay.com/ ...
移动端h5唤起键盘_移动端H5监听键盘弹出和收起
const isIOS= /iphone|ipad|ipod/.test(ua); const isAndroid= /android/.test(ua);if(isIOS) { let isRese ...
html5+php调用android手机图片,html5+exif.js+canvas+php实现手机上传图片，图片损坏无法打开...
上传图片,图片损坏无法打开,图片路径也是正确的, function selectFileImage(fileObj) { var file = fileObj.files['0']; //图片方向角 ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

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

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

最新文章

热门文章