!23083 modify web docs for Interface onShowFileSelector

Merge pull request !23083 from 章靖/monthly_20230815

!23083 modify web docs for Interface onShowFileSelector
Merge pull request !23083 from 章靖/monthly_20230815
7c255c9e · openharmony_ci · Gitee · f3dc9f8d · cefd7e53 · 7c255c9e
隐藏空白更改
内联并排

Showing with 26 addition and 18 deletion

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md ...ication-dev/reference/arkui-ts/ts-basic-components-web.md +26 -18

未找到文件。
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -2197,7 +2197,8 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector

  ```ts
  // xxx.ets
-  import web_webview from '@ohos.web.webview'
+  import web_webview from '@ohos.web.webview';
+  import picker from '@ohos.file.picker';

  @Entry
  @Component
@@ -2206,24 +2207,18 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector

    build() {
      Column() {
-        Web({ src: 'www.example.com', controller: this.controller })
+        Web({ src: $rawfile('index.html'), controller: this.controller })
          .onShowFileSelector((event) => {
-            AlertDialog.show({
-              title: event.fileSelector.getTitle(),
-              message: 'isCapture:' + event.fileSelector.isCapture() + " mode:" + event.fileSelector.getMode() + 'acceptType:' + event.fileSelector.getAcceptType(),
-              confirm: {
-                value: 'upload',
-                action: () => {
-                  let fileList: Array<string> = [
-                    '/data/storage/el2/base/test',
-                  ]
-                  event.result.handleFileList(fileList)
-                }
-              },
-              cancel: () => {
-                let fileList: Array<string> = []
-                event.result.handleFileList(fileList)
-              }
+            console.log('MyFileUploader onShowFileSelector invoked')
+            const documentSelectOptions = new picker.DocumentSelectOptions();
+            let uri = null;
+            const documentViewPicker = new picker.DocumentViewPicker();
+            documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
+              uri = documentSelectResult[0];
+              console.info('documentViewPicker.select to file succeed and uri is:' + uri);
+              event.result.handleFileList([uri]);
+            }).catch((err) => {
+              console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
            })
            return true
          })
@@ -2231,6 +2226,19 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
    }
  }
  ```
+  
+  加载的html文件。
+  ```html
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
+  </head>
+  <body>
+    <form id="upload-form" enctype="multipart/form-data">
+      <input type="file" id="upload" name="upload"/>
+  </body>
+  ```

 ### onResourceLoad<sup>9+</sup>