HarmonyOS H5中的input标签怎么调起系统文件、照片选择

<input type="file" accept="image/*" style="position: absolute; visibility: hidden; z-index: -999; width: 0px; height: 0px; top: 0px; left: 0px;">

H5页面无法调起相册、拍照、选择文件弹窗交互,是还不支持input标签吗?

HarmonyOS
2024-09-05 09:45:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

input上传文件可参考以下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-file-upload-V5

拍照实现可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/camera-shooting-case-V5

input上传图片需要添加onShowFileSelector 接口,拉起图库。可参考以下demo:

import web_webview from ‘@ohos.web.webview’ 
import picker from ‘@ohos.file.picker’ 
import { BusinessError } from ‘@ohos.base’ 
@Entry 
@Component 
struct Index { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: $rawfile(‘i.html’), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          console.log(‘MyFileUploader onShowFileSelector invoked’) 
          const photoSelectOptions = new picker.PhotoSelectOptions(); 
          photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE 
          photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目 
          let uris: Array<string> = []; 
          const photoViewPicker = new picker.PhotoViewPicker(); 
          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => { 
            uris = photoSelectResult.photoUris; 
            console.info(‘photoViewPicker.select to file succeed and uris are:’ + uris); 
          }).catch((err: BusinessError) => { 
            console.error(Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}); 
          }) 
          return false 
        }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-09-05 18:30:54
相关问题
HarmonyOS web通过loadData加载h5标签
38浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机样例代码
69浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
378浏览 • 1回复 待解决
HarmonyOS h5拉起系统扫码页面的demo
51浏览 • 1回复 待解决
Webwebview和H5交互
930浏览 • 1回复 待解决
HarmonyOS webview h5localstorage
264浏览 • 1回复 待解决
H5图片在Web组件显示异常
54浏览 • 1回复 待解决
HarmonyOSH5如何跳转到应用市场
501浏览 • 1回复 待解决
HarmonyOS web与H5交互
441浏览 • 1回复 待解决
HarmonyOS H5如何访问相册?
27浏览 • 1回复 待解决
HarmonyOS h5和ArkTS通信
25浏览 • 1回复 待解决
如何在HarmonyOS调试h5页面
751浏览 • 1回复 待解决
如何在webview中使用H5alert
1150浏览 • 1回复 待解决