webview如何支持上传图片前预览图片

雅阁驸马 2014-05-10 11:20:29
如题目所表达,我现在要做一个webapp,在webview上要显示一个网站,网站里有上传图片的功能,上传图片前可以对上传的图片预览,我给出上传图片的js代码

<script type="text/javascript">
document.getElementById('inputPics0').onchange = function (evt) {

// 如果浏览器不支持FileReader,则不处理
if (!window.FileReader) { alert("不支持"); return; }
var files = evt.target.files;


var fileType = files[0].type;
/* if (fileType.indexOf("image") == -1) {
alert('请选择图片文件)');
return;
}

*/
var reader = new FileReader();

reader.onload = function (e) {

$('#addpicli').show();
//$('#addpicimg').attr('src',this.result);
document.getElementById("addpicimg").src=this.result;
}
reader.readAsDataURL(files[0]);


}
</script>

实现如图的功能:

点击加号那个图片后,选择好你要添加的图片:

下面是我的部分android代码:

this.wv_myweb.setWebChromeClient(new WebChromeClient (){

// Android > 4.1.1 调用这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg,
String acceptType, String capture) {
mUploadMessage = uploadMsg;
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.addCategory(Intent.CATEGORY_OPENABLE);
intent.setType("image/*");
MyWebActivity.this.startActivityForResult(Intent.createChooser(intent, "File Chooser"), FILECHOOSER_RESULTCODE);
System.out.println("1");
}


//扩展浏览器上传文件
//3.0++版本
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MyWebActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
System.out.println("2");
}

// Android < 3.0 调用这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
mUploadMessage = uploadMsg;
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.addCategory(Intent.CATEGORY_OPENABLE);
intent.setType("image/*");
MyWebActivity.this.startActivityForResult(Intent.createChooser(intent, "File Chooser"), FILECHOOSER_RESULTCODE);
System.out.println("3");
}

});

它实现了选取文件的功能,下面是onActivityResult

protected void onActivityResult(int requestCode, int resultCode,
Intent intent) {
if (requestCode == FILECHOOSER_RESULTCODE) {

if (mUploadMessage == null)
return;

Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
if (result!=null){

String filePath = null;

if ("content".equals(result.getScheme())) {

Cursor cursor = this.getContentResolver().query(result, new String[] { android.provider.MediaStore.Images.ImageColumns.DATA }, null, null, null);
cursor.moveToFirst();
filePath = cursor.getString(0);
cursor.close();
System.out.println(filePath);

} else {
System.out.println(filePath);
filePath = result.getPath();

}

Uri myUri = Uri.parse(filePath); System.out.println(myUri);
mUploadMessage.onReceiveValue(myUri);

} else {

mUploadMessage.onReceiveValue(result);

}

mUploadMessage = null;
}
}

现在有一个问题就是,在我的htc android 4.0.1上可以成功添加,但是在android 4.1.2上,点击添加按钮,选择好图片以后,没有反应。截图是我在pc上截图的,在pc任意浏览器都能实现点击添加图片并预览,但是在手机上,我测了两个机子,4.0.1上可以,4.1.2上不可以。
...全文
438 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
LinVector 2016-05-31
  • 打赏
  • 举报
回复
估计是少加了这一句吧:
webView.getSettings().setJavaScriptEnabled(true);
雅阁驸马 2014-05-15
  • 打赏
  • 举报
回复
我纳闷的是,猎豹浏览器跟uc跑我这个页面,可以实现预览,我特别想知道这是为啥,我写的这个webview就相当于一个简易的浏览器,
雅阁驸马 2014-05-15
  • 打赏
  • 举报
回复
不是用webview+js来做的,webview只是简单的做一个现实页面的东西而已,所有的包括上传,显示等功能全由js完成,我现在要做的是一个webapp,你说的:2.点击其中的一张图片,显示缩略图预览,这个是纯android实现,显示略缩图,android上没有空间让你显示的,因为webview是占据整个屏幕的,就算有,空间上也不好调整,
睡觉谁叫~~~ 2014-05-13
  • 打赏
  • 举报
回复
这个是用webview+js方式来做的么?我的思路如下: 1.网页中点击+号,弹出图片列表,选择其中一张图片(js调用android的图片显示接口) 2.点击其中的一张图片,显示缩略图预览,这个是纯android实现 3.将图片 http传送给服务器,android代码来做 4.上传成功之后刷新页面,显示刚刚上传的图片。
雅阁驸马 2014-05-13
  • 打赏
  • 举报
回复
谢谢,我觉得webapp是一个趋势,对于某些视觉效果要求不高的应用,完全可以实现跨平台,只是现在搞这个的人貌似不多,
十三邵 2014-05-12
  • 打赏
  • 举报
回复
如题目所表达,我现在要做一个webapp,在webview上要显示一个网站,网站里有上传图片的功能,上传图片前可以对上传的图片预览,我给出上传图片的js代码 我也不会,帮你顶一下吧。。。
基于Bootsrap 4.0框架改写全部样式。 ■基于FLex弹性布局重写端(OA平台因要支持传统业务暂不涉及)。 ■提供全新的Bootstrap 4.0技术文档,并获得Bootstrap官方认同,访问http://code.z01.com/v4 ■后端全面引入scss(sass)技术,与Bootstrap官方保持一致(作为国内首家引入Bootstrap的CMS厂商,一直推动基产品的国内实施和普及教育)。 ■Markdown编辑器,可访问https://www.73ic.com/Plugins/markdown/ 体验。 ■推出全新的示范站点和云门户www.73i.com (beta)。 ■支持批量SSL证书部署模式 。 ■修正节日LOGO为SVG矢量。 ■修正搜索样式。 ■改进内置搜索表现,提供更多参数。 ■提供丰富的细致搜索。 ■在搜索主页提供svg代码式嵌入示范。 ■提供SASS(SCSS)引用规范 。 ■基于rem单位进行编程。 ■修正2018年节日功能-全部加载SVG矢量图形。 ■改进端模板为绿色主题。 ■文件引用从单http改为http、https自适应引用方式。 ■提供了.map支持(Map技术介绍https://www.z01.com//help/web/3208.shtml)。 ■修复论坛(贴吧)发帖审核状态码从1改为99,与全局统一。 ■后台启动页配置-自由决定初始首屏界面。 ■增加小程序模块,快速开发小程序。 ■增加:云端建站功能,全新的在线拖拽建站。 ■增加:数据表自由导出为Excel(扩展--数据导出为Excel),自由导出您的任何意表单数据,对于站长业说可以更好的管理自主数据。 ■建站:版块表单功能,提交的表单后台存储 ■建站:模板增加预览功能(PC,iPad,iPhone) ■建站:使用新的编辑器替代ckeditor ■建站:版块数据管理功能(content|image等) ■修复:UEditor编辑器,图片上传Bug ■修复:模型字段,设置为端不显示时,后台内容管理也不显示Bug ■修复:用户中心--内容--无法添加商品Bug ■修复:会员Excel导入Bug ■增加:扩展邮件发送模块,会记录邮件模板,与发送日志(目标用户是否成功接收) ■增加:新建|修改标签,数据表选择--支持下拉筛选 ■扩展:能力中心--增加[@我的]筛选 ■扩展:增加用户列表JS插件 ■扩展:优化了AJAX单文件上传组件,支持一个页面放置多个上传组件 ■增加:BIS模块 ■扩展:LED设计模块,支持动画等效果 ■修改:Boot4标签解析,增加font字体,基于逐浪字库的高端字体图标技术。 ■增加:Bis增加订单补录功能 ■修复:邮件页面支持name与title字段传参 ■优化:优化调整商品逻辑层 ■增加:管理员,用户AJAX登录,启用加密传输 ■扩展:微信小程序接口,增加安全验证(避免被其他人调用接口),扩展购物车,用户等模块 ■增加:库选字段--下拉选单被遮住Bug,并增加判断,避免JS重复加载 ■增加:库选字段增加筛选功能 ■增加:增加RSA加密方式,用于端加密传输(暂只用于用户登录页) ■安全:增加AntiXSS插件,专用于处理用户提交的HTML,过滤危险标签 ■修复:商品修改,精品属性丢失Bug ■安全:增强了底层标签模块的安全检测 ■扩展:地图字段,简洁--完全版支持互转 ■增加:扩展虚拟币支持图片凭证 ■增加:用户画像功能 ■扩展:增加最大用户注册数限制 ■扩展:订单打印,增加显示商品购买时价格 ■扩展:用户信息(UserBase)增加移动设备专用页面 ■修复:订单往付款,状态检测不正确Bug ■扩展:多选项字段,增加省份大学二级联动 ■增加:标签查询数据转换为json功能 { ZL:Json} ■扩展:按需修改当日期标签 ■扩展:地图增加经玮度定位,增加经玮度显示 ■修复:首页左边栏按钮Bug ■修复:不能迁移到根节点Bug ■扩展:按需修改购物车发票逻辑 ■增加:会员中心管理发票模板功能(最多6个) *购物车购买时,发票信息会自动存为模板 *用户中心可维护发票信息 ■修复:节点删除入回收站Bug(批量删除不入回收站,不显示子节点) ■增加:扩展发票模块,抽取最近的五次不重复的发票数据 ■扩展:增加内容置顶与置顶到期时间字段, ■移除:内容模型已不用的字段(Cast_File,Pronum,ProWeek,BidMoney,BidType,IsBid,OrderClass,ComplianceUserList) ■修复:贴吧图标,与图片解析标签Bug ■增加:内容按用户组设计访问权限 ■扩展:发票增加分类功能 ■扩展:按需改写有问必答模块 ■修复:有问必答--用户中心筛选Bug ■修复:多文件上传,被禁止的上传的文件(exe等危险文件)显示Bug ■扩展:使用新版本Jquery.js(升级到全新的v3.2.1) ■修复:节点链接Bug ■修复:单页--只允许首页生成 ■修复:扩展--运行SQL语句增加二次密码校验 ■扩展:Logo设计,下载图片时会自动添加水印 ■修复:因为特殊字符,导致word无法生成Bug ■按需扩展龙悦云收银模块 ■修复:中文无法输入Bug ■扩展:按需优化POS收银代码,增强稳定性,并可记录异常 ■扩展:支持打印份数,与USB打印机 ■按需扩展金赣物联网远程视频与数据监控模块。 ■增加:PayPal即时到账支付 ■增加:初步重写了CRM模块 ■扩展:增加导入辅助类,用于辅助Excel数据的导入 ■修改:域名归并与强制https,改为301跳转 ■扩展:增加微信带参二维码接口与相关事件处理 ■修复:有问必答--图片附件Bug ■修复:标签--新建数据表,链接错误 ■扩展:商城模块按需扩展 ■扩展:后台新权限验证机制完成迁移 ■修复:手机注册,验证码Bug ■增加:初步确定HoloLens 2D程序开发方式(UWP+WebView)以及3D仿生开发模块,并推出全新的混合现实门户http://pano.z01.com 以及其它重要更新,立即下载,马上获得2018最新最牛最强大的web与移动开发中间件↓ MD5: 210E59B944C26B9BA0CE513ED26AECCE SHA1: 704F7754DC2B30036B993E9F12CDDFBA9BC25F7F CRC32: D58F68C1

80,337

社区成员

发帖
与我相关
我的任务
社区描述
移动平台 Android
androidandroid-studioandroidx 技术论坛(原bbs)
社区管理员
  • Android
  • yechaoa
  • 失落夏天
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧