使用iframe在Nativescript Webview中上传文件 [英] Upload File in Nativescript Webview with iframe

问题描述

我的问题是我有一个包含动态表单的Web视图，该表单是由WP Builders动态创建的，并且包含在iframe中，我想从nativescript应用程序中选择文件，这将不允许我选择文件.

My problem is I have one webview Containing Dynamic Form or form which is created dynamic with WP Builders and that is included in iframe and i want to select file from application in nativescript this will not allow me select file.

所以我想尝试

如何以本机脚本将文件加载到webview中

http://shripalsoni.com/blog/nativescript- webview-native-bidirectional-communication/

但是问题是形式是动态的，是否有任何脚本可以检测框架内文件输入的单击事件，并且如果我们可以检测到文件输入单击的事件，那么在选择文件时还会放置文件路径.

But problem is form is dynamic is there any script which will detect click event of file input inside frame and also put file path to it when file is selected if we can detect event for file input click.

另一个问题是，如果以动态形式输入了多个文件

another issue is what if there are more than one file input in dynamic form

推荐答案

我通过在android中实现WebChromeClient获得了答案

I Got Answer by Implementing WebChromeClient In android

 let webview: WebView = this.webViewRef.nativeElement;
 let myWebChromeClient: MyWebChromeClient = new MyWebChromeClient();
 webview.android.setWebChromeClient(myWebChromeClient);

MyWebChromeClient类在这里

and class MyWebChromeClient is here

import * as imagepicker from "nativescript-imagepicker";
import * as fs from "file-system";

export class MyWebChromeClient extends android.webkit.WebChromeClient {
    file_path:string;
    constructor() {
        super();

        return global.__native(this);
    }

    onShowFileChooser(webView,filePathCallback,fileChooserParams) {

         this.filepathCallback(filePathCallback);

        return true;
    }

    filepathCallback(filePathCallback)
    {
        let context = imagepicker.create({
            mode: "single",
            mediaType: imagepicker.ImagePickerMediaType.Any
        });
       this.startSelection(context,filePathCallback);
    }

    startSelection(context,filePathCallback) {
        context.authorize().then(() => {
                                    return context.present();
                                  })
            .then((selection) => {
                selection.forEach((selected) => {
                    let path = selected.android;
                    let file = fs.File.fromPath(path);
                    this.file_path = file.path;
                    this.file_path = "file://" + this.file_path;
                    let results = Array.create(android.net.Uri, 1);
                    results[0] = android.net.Uri.parse(this.file_path);

                    filePathCallback.onReceiveValue(results);
                    return this.file_path;
                });
            }).catch(function (e) {
                console.log(e);
            });
    }
}

这篇关于使用iframe在Nativescript Webview中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！