我可以以编程方式将图像或文件上传到 wkwebview 输入字段吗？答案

【问题标题】：Can I upload image or a file to wkwebview input field programmatically?我可以以编程方式将图像或文件上传到 wkwebview 输入字段吗？
【发布时间】：2020-01-24 11:01:58
【问题描述】：

我有一个网络应用程序，用户可以在其中选择一张图片并上传并用它做一些事情。我正在构建一个 iOS 应用程序，可以在 WKWebView 中打开我的网络应用程序。目前用户可以选择一张图片并将其上传到 iOS 应用程序上。但我想实现允许用户编辑图片的功能。我知道如何实现编辑图片，但我不确定是否可以通过编程方式将文件上传到WKWebView 上的<input/> 字段。

【问题讨论】：

您好，可以的。你可以这样做，如果有问题可以在这里分享代码。
我的代码没有问题，我想知道WKWebview是否有这样的支持。如果您有一个链接或关于我如何做到这一点的一般想法，那将非常有帮助。我在 WKWbeview 文档或其他社区上找不到解决方案
好的，现在没有示例代码，以后如果会在这里更新。

标签： swift xamarin.ios wkwebview

【解决方案1】：

我之前有一个在 Windows 浏览器中使用的 Html 代码。在 iOS 中尝试后，它也可以从 iOS 中选择图像。您需要修改的是上传数据到服务器。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload Image</title>

    <style type="text/css">
            /*
        css
         */
            #fileimg {
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
            }

            .Btn {
                width: 100px;
                background: #4BCD61;
                border: 0px;
            }
    </style>
    <script type="text/javascript">
        //JS
        function fileClick() {
            document.getElementById('file').click()
        }//

        function upCh(file) {
            let img = document.getElementById('fileimg')
            let formData = new FormData()
            let imgUrl = file.files[0];
            if (imgUrl) {
                formData.append('file', imgUrl);
                /*
                 up load to server .
                */
            }
        }

    </script>

</head>
<body>
    <input type="file" id="file" name="" onchange="upCh(this)" />
    <br />
    <img id="fileimg" src="" />
    <br />
    <button class="Btn" onclick="fileClick()">Upload Image</button>
</body>
</html>

如果想与 Html 交互，可以使用invoke javascript method to Native。

var config = new WKWebViewConfiguration();
var wk = new WKWebView(UIScreen.MainScreen.Bounds, config);
var js = (NSString) "document.getElementById('foo').innerHTML = 'bar'";
WKJavascriptEvaluationResult handler = (NSObject result, NSError err) => { 
  if(err != null)
  {
    System.Console.WriteLine(err);
  }
  if(result != null)
  {
     System.Console.WriteLine(result);
  }
};
wk.EvaluateJavaScript(js, handler);

【讨论】：

感谢您抽出宝贵时间提供此解决方案。我想这会奏效。只是为了确保，我实际上不能像正常的输入字段行为那样将文件设置为输入字段，但我能做的就是上传到服务器。对吗？
@Abdurakhmon 您好，set file to an input field like normal input field behavior是什么意思，您可以详细解释一下normal input。
我的意思是以编程方式将文件设置为字段。通过正常行为，我的意思是用户选择一个文件，该文件被设置为字段。
@Abdurakhmon 如果您的意思是使用 C# 代码将图像数据传输到 wkwebview ，这是可能的。您可以使用 Native 代码来调用 JavaScript。