使用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

相关文章
|
6天前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
18天前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
17天前
|
缓存 开发工具 开发者
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
|
4天前
|
人工智能 小程序 API
【一步步开发AI运动APP】八、自定义姿态动作识别检测——之姿态相似度比较
本文介绍了如何通过姿态相似度比较技术简化AI运动应用开发。相比手动配置规则,插件`pose-calc`提供的姿态相似度比较器可快速评估两组人体关键点的整体与局部相似度,降低开发者工作量。文章还展示了在`uni-app`框架下调用姿态比较器的示例代码,并提供了桌面辅助工具以帮助提取标准动作样本,助力开发者打造性能更优、体验更好的AI运动APP。
|
5天前
|
安全 前端开发 Android开发
拥抱国产化:转转APP的鸿蒙NEXT端开发尝鲜之旅
本文将要分享的是转转APP在开发全新鸿蒙NEXT端所遇到的一些问题,对比了鸿蒙开发和 Android、iOS 的不同,总结了这次开发过程中的一些经验等等。希望能带给你启发。
18 0
|
11月前
|
存储 Java 开发工具
Android开发的技术与开发流程
Android开发的技术与开发流程
467 1
|
8月前
|
安全 Android开发 Swift
安卓与iOS开发:平台差异与技术选择
【8月更文挑战第26天】 在移动应用开发的广阔天地中,安卓和iOS两大平台各占一方。本文旨在探索这两个系统在开发过程中的不同之处,并分析开发者如何根据项目需求选择合适的技术栈。通过深入浅出的对比,我们将揭示各自平台的优势与挑战,帮助开发者做出更明智的决策。
135 5
|
8月前
|
移动开发 搜索推荐 Android开发
安卓与iOS开发:一场跨平台的技术角逐
在移动开发的广阔舞台上,两大主角——安卓和iOS,持续上演着激烈的技术角逐。本文将深入浅出地探讨这两个平台的开发环境、工具和未来趋势,旨在为开发者揭示跨平台开发的秘密,同时激发读者对技术进步的思考和对未来的期待。
|
8月前
|
移动开发 开发工具 Android开发
探索安卓与iOS开发的差异:技术选择的影响
【8月更文挑战第17天】 在移动应用开发的广阔天地中,安卓和iOS两大平台各领风骚。本文通过比较这两个平台的编程语言、开发工具及市场策略,揭示了技术选择对开发者和产品成功的重要性。我们将从开发者的视角出发,深入探讨不同平台的技术特性及其对项目实施的具体影响,旨在为即将步入移动开发领域的新手提供一个清晰的指南,同时给予资深开发者新的思考角度。
93 3
|
8月前
|
编解码 Android开发 iOS开发
安卓与iOS开发:平台差异下的技术创新之路
在数字时代的浪潮中,移动应用开发如同两股潮流——安卓与iOS,各自携带着独特的技术生态和文化基因。本文将深入探讨这两大平台的开发环境、编程语言和工具的差异,以及它们如何塑造了不同的用户体验和技术趋势。通过比较分析,我们旨在揭示跨平台开发的可能性和挑战,同时探索未来技术创新的方向。让我们一起跟随代码的足迹,穿越安卓的开放草原和iOS的精密园林,发现那些隐藏在平台差异之下的创新机遇。
80 1
下一篇
oss创建bucket