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

相关文章
|
16天前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
525 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
2月前
|
API 调度 Android开发
告别回调地狱,拥抱流畅开发体验:Kotlin协程带你解锁异步编程新姿势,让App响应速度飙升!
【9月更文挑战第11天】随着移动互联网的发展,用户对应用体验的要求不断提高,异步编程因此变得尤为重要。Kotlin凭借简洁的语法和强大的功能,在Android开发中脱颖而出。协程作为Kotlin的核心特性之一,简化了异步代码编写,提高了程序性能与可维护性。
66 5
|
2月前
|
移动开发 定位技术 Android开发
「揭秘高效App的秘密武器」:Kotlin Flow携手ViewModel,打造极致响应式UI体验,你不可不知的技术革新!
【9月更文挑战第12天】随着移动开发领域对响应式编程的需求增加,管理应用程序状态变得至关重要。Jetpack Compose 和 Kotlin Flow 的组合提供了一种优雅的方式处理 UI 状态变化,简化了状态管理。本文探讨如何利用 Kotlin Flow 增强 ViewModel 功能,构建简洁强大的响应式 UI。
45 3
|
2月前
|
安全 Java Android开发
探索安卓应用开发的新趋势:Kotlin和Jetpack Compose
在安卓应用开发领域,随着技术的不断进步,新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言,因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时,Jetpack Compose作为一个新的UI工具包,提供了一种声明式的UI设计方法,使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
59 4
|
3月前
|
开发工具 git
【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错
【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错
|
3月前
|
开发框架 .NET Windows
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
|
3月前
|
域名解析 网络协议 网络安全
【App Service】遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的调试小工具
【App Service】遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的调试小工具
|
3月前
|
安全 网络安全 Windows
【Azure App Service】遇见az命令访问HTTPS App Service 时遇见SSL证书问题,暂时跳过证书检查的办法
【Azure App Service】遇见az命令访问HTTPS App Service 时遇见SSL证书问题,暂时跳过证书检查的办法
【Azure App Service】遇见az命令访问HTTPS App Service 时遇见SSL证书问题,暂时跳过证书检查的办法