android系统webview使用input实现选择文件并预览
一般系统的实现方式:
- 代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片预览</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>
<img class="img" width="100" height="100" id="previewimg">
</p>
<input class="select" type="file" id="picfile">
<script>
$('.select').change(function(e) {
var _URL = window.URL || window.webkitURL;
$("#previewimg").attr("src", _URL.createObjectURL(this.files[0]))
})
</script>
</body>
</html>
- input type="file"就是文件选择标签,默认样式为:
如果不喜欢默认样式,可以把它设置为透明,然后自己用图片或元素覆盖它,这时候他仍然能响应点击
opacity: 0;
multiple="multiple" 属性可以让input一次选择多个文件
注册change监听或定义onChange方法可以在选择完图片后回调,回调中使用files数组属性来获取选择的文件,如果是选择单文件,files[0]表示选择的图片
jquery回调中,this会自动指向当前操作的元素,例子中的this和getElementById("picfile")相对,如果要使用jquery方法,可以用$(this)
oninput事件在元素值发生变化时立即触发, onchange在元素失去焦点时触发,如果是输入文字,oninput在输入过程中一直回调(输入或删除一个文字就会调用一次),onchange在输入完成,点击其他地方调用。
createObjectURL把file对象转为url让img标签显示
android系统的实现
安卓webview系统无法通过input打开系统选择文件框,必须在原生里面拦截webview事件,选择完文件,处理相关逻辑(比如上传文件到oss)后回调到webview
wvmain.setWebChromeClient(new WebChromeClient(){
//For Android >= 5.0
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
uploadMessageAboveL = filePathCallback;
uploadPicture();
return true;
}
//For Android >= 4.1
public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
uploadMessage = valueCallback;
uploadPicture();
}
});
- 选择并处理完文件后,调用Callback(valueCallback 或 filePathCallback)的onReceiveValue方法,webview里的input标签才会调用onchange
比如以下是选择完文件后,上传文件到oss成功后的回调里,如果成功得到oss图片地址,则调用onReceiveValue方法把图片的本地uri回传给webview,失败或异常情况回传null给webview
public void successImg(String img_url) {
if (img_url != null){
curPicUrl = img_url;
mHandle.sendEmptyMessage(UPLOAD_SUCESS);
if (uploadMessage != null) {
uploadMessage.onReceiveValue(imageUri);
uploadMessage = null;
}
if (uploadMessageAboveL != null) {
uploadMessageAboveL.onReceiveValue(new Uri[]{imageUri});
uploadMessageAboveL = null;
}
}else{
curPicUrl = "";
mHandle.sendEmptyMessage(UPLOAD_FAIL);
if (uploadMessage != null) {
uploadMessage.onReceiveValue(null);
uploadMessage = null;
}
if (uploadMessageAboveL != null) {
uploadMessageAboveL.onReceiveValue(null);
uploadMessageAboveL = null;
}
}
}
- 如果回传null给webview,如果input里面之前还没有文件, input的onchange,oninput方法不会调用,如果之前已经选择过文件,files对象之前里面有内容,现在内容会变成空,发生了改变,onchange,oninput方法都会调用(先调用oninput),但是files对象的长度为0,可以根据files的长度来做不同的处理,比如:
doChange() {
var file = document.getElementById("fileInput");
if(file.files.length == 0){//清除之前的图片
document.getElementById("showpic" + i).style.display = "none";
return;
}else{
//显示图片预览
}
}
android系统webview使用input实现选择文件并预览的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- HTML5: 实现调用系统拍照或者选择照片并预览
ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览 1.返回顶部 1. <!DOCTYPE html> <html> <head> <meta ...
- vue使用readAsDataURL实现选择图片文件后预览
vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...
- Java实现文件的预览
最近项目需要用到文件的预览功能,就开始在网上收集资料,学习了几种文件预览的方法.我集成到我项目内测试的有以下三种,最后使用的是第三种: 直接使用别人提供的服务 例如:office web 365 使用 ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程
大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- office文件的预览
使用FlexPaper实现office文件的预览(C#版) 需求很简单,用户上传office文件(word.excel.ppt)后,可以预览上传的这些文件.搜索的相关的资料后.整理如下: Step1. ...
- 关于confluence上传文件附件预览查看时出现乱码的问题解决办法
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
随机推荐
- hdu 6567 Cotree 树的重心
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6567 #include<iostream> #include<algorithm&g ...
- django restful 序列化
https://www.cnblogs.com/wt7018/p/11456440.html https://www.cnblogs.com/wt7018/p/11530962.html
- pymysql总结
一.创建数据库 import pymysql conn = pymysql.connect(host='ip', user='root', password='密码') # 以字典的形式返回操作结果 ...
- 异数OS 织梦师-Xnign(四)-- 挑战100倍速Nginx,脚踩F5硬件负载均衡
. 异数OS 织梦师-Xnign(四)– 挑战100倍速Nginx,脚踩F5硬件负载均衡 本文来自异数OS社区 github: https://github.com/yds086/HereticOS ...
- Nmap使用教程(进阶篇)
什么是防火墙? 防火墙是用来控制网络访问的软件或硬件.分为以下两类:1.基于主机的防火墙:2.基于网络的防火墙. 基于主机的防火墙 这是在单台主机上运行的软件,用来控制入站流量(从网络向主机)和出站流 ...
- [洛谷P3254] [网络流24题] 圆桌游戏
Description 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,--,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,--,n) ...
- 团队项目——Alpha发布1
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/homework 这个作业要求在哪里 https ...
- php--->单例模式封装mysql操作类
php 单例模式封装mysql操作类 单例模式的必要条件(三私一公) 私有的成员属性--防止类外引入这个存放对象的属性 私有的构造方法--为了防止在类外使用new关键字实例化对象 私有的克隆方法--为 ...
- Docker基础内容之端口映射
随机映射 docker run -d -P training/webapp python app.py # -P会随机映射一个 49000~49900 的端口到内部容器开放的网络端口 映射所有接口地址 ...
- flask插件全家桶集成学习---持续更新ing
不得不说flask的设计要比django要小巧精妙的多了,没有那么臃肿,只保留核心功能,其他的都需要自己引入,即各种各样的插件来满足我们的需求,我这里记录一下自己学习项目中用的插件使用方法和一些技巧总 ...