使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件

简介: 在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;

在Kotlin中开发Android应用时,如果你想要在WebView中处理HTML5的<input type="file">标签以触发文件选择器,你可以结合使用registerForActivityResult(也称为rememberLauncherForActivityResult,但在Fragment中更常用的是前者)和WebChromeClient。以下是一个在Activity中实现的示例代码,展示了如何设置WebView并处理文件选择。


在你的Activity中,设置WebView,并注册一个用于处理文件选择的ActivityResultLauncher,同时设置WebChromeClient以监听文件选择器的请求:

import android.content.Intent  
import android.net.Uri  
import android.os.Bundle  
import android.webkit.ValueCallback  
import android.webkit.WebChromeClient  
import android.webkit.WebView  
import android.webkit.WebViewClient  
import androidx.activity.result.ActivityResultLauncher  
import androidx.activity.result.contract.ActivityResultContracts  
import androidx.appcompat.app.AppCompatActivity  
  
class MainActivity : AppCompatActivity() {  
  
    private lateinit var webView: WebView  
    private lateinit var fileChooserLauncher: ActivityResultLauncher<Intent>  
  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContentView(R.layout.activity_main)  
  
        webView = findViewById(R.id.webview)  
  
        // 设置WebViewClient处理页面加载  
        webView.webViewClient = WebViewClient()  
  
        // 设置WebChromeClient处理文件选择等  
        webView.webChromeClient = object : WebChromeClient() {  
            override fun onShowFileChooser(  
                webView: WebView?,  
                filePathCallback: ValueCallback<Array<Uri>>?,  
                fileChooserParams: FileChooserParams?  
            ): Boolean {  
                // 创建Intent来启动文件选择器  
                val intent = Intent(Intent.ACTION_GET_CONTENT)  
                intent.type = "*/*" // 设置MIME类型,这里表示所有类型  
                intent.addCategory(Intent.CATEGORY_OPENABLE)  
  
                // 使用ActivityResultLauncher启动Intent  
                fileChooserLauncher.launch(intent)  
  
                // 必须返回true,表示文件选择器将被处理  
                return true  
            }  
        }  
  
        // 加载网页  
        webView.loadUrl("https://your-website.com/page-with-file-input.html")  
  
        // 注册ActivityResultLauncher以处理文件选择结果  
        fileChooserLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->  
            if (result.resultCode == RESULT_OK) {  
                // 处理选择的文件,这里假设filePathCallback是全局可访问的  
                // 注意:在实际应用中,filePathCallback可能不是全局的,你需要通过其他方式传递它  
                // 例如,你可以将WebView的引用和filePathCallback一起传递给一个自定义的类,该类将处理文件选择  
                // 这里只是示例,所以省略了这部分逻辑  
  
                // 假设你有一个全局的filePathCallback变量  
                // filePathCallback?.onReceiveValue(arrayOf(result.data?.data))  
            }  
        }  
    }  
  
    // 注意:上面的filePathCallback处理是简化的,实际中你可能需要不同的逻辑  
    // 因为在WebChromeClient的onShowFileChooser方法中,filePathCallback是局部的  
    // 你需要找到一种方法来在文件选择结果返回时调用它  
  
    // 一种可能的解决方案是使用弱引用或全局变量(但请注意内存泄漏的风险)  
    // 或者,你可以将WebView的引用和filePathCallback一起封装在一个自定义的类中  
}

注意:上面的代码示例中,filePathCallback的处理是简化的,因为在实际情况下,filePathCallback是在onShowFileChooser的局部作用域中定义的,并且不是全局可访问的。因此,你需要找到一种方法来在文件选择结果返回时调用它。

一种常见的做法是将WebView的引用和filePathCallback一起封装在一个自定义的类中,该类将负责处理文件选择请求和结果。这样,你就可以在文件选择结果返回时,通过该类的实例来调用filePathCallback

相关文章
|
11月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
1080 0
|
9月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件,其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架,本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
576 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
15286 81
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
存储 算法 API
【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
3511 82
|
存储 数据可视化 开发工具
【Application Insights】Application Insights存储的Function App的日志存在"Operation Link" 为空的情况
在将 Azure Functions 升级到 .NET 8 和 Isolated Worker 模式后,Application Insights 的请求日志中 `operation_Link` 字段为空,导致分布式追踪无法正常关联。解决方法包括:确保引用正确的 SDK 包(如 `Microsoft.Azure.Functions.Worker.ApplicationInsights`),正确配置 Application Insights 服务,移除默认日志过滤规则,并使用最新依赖包以支持分布式追踪。通过这些步骤,可恢复端到端事务视图的可视化效果。
244 11
|
12月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
480 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
600 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。
183 0
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
1057 11
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
存储 API 数据安全/隐私保护
【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
2850 6