如何使用 CEF WinForms 以编程方式将文件附件添加到网页

问题描述

我有一个 CEF WinForm 应用程序，它加载一个用于创建服务台票证的网页。 我希望用户能够单击 SCREENSHOT 按钮并将文件保存到桌面，然后自动将其附加到 CHROMIUM 浏览器控件内的网络表单。

我可以轻松地将文件保存到桌面，这很简单，没有问题。 我也试过

browser.DialogHandler = new TempFileDialogHandler(Environment.GetFolderPath(Environment.SpecialFolder.Desktop) + @"\Capture.jpg");

这将获取文件 (CAPTURE.JPG) 并将其附加到浏览器控件，但不会附加到实际网页。

我可以使用 javascript (script) 选项并以某种方式将此文件以编程方式放入页面中的 FileUpload 控件中吗（见下文）

我知道我可以让用户点击按钮并自己手动添加文件，但我想自动化这个过程。任何帮助或指导将不胜感激。

**** 2021 年 1 月 7 日编辑。

我尝试使用以下代码来使用 DOM 对象。

using (CefSharp.DevTools.DevToolsClient client = browser.GetDevToolsClient())
            {
                Task<GetDocumentResponse> dom = client.DOM.GetDocumentAsync();
                QuerySelectorResponse querySelectorResponse = await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId,"fileupload");
                _ = client.DOM.SetFileInputFilesAsync(new string[] { @"c:\temp\scr.png" },querySelectorResponse.NodeId);
            }

我正在使用 CefSharp WinForms v83。当我运行代码时，它挂在

await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId,"fileupload");

我需要事件处理程序吗？

编辑 2021 年 1 月 7 日 #2 对代码的以下更改使其工作一次。

await Task.Run(async () =>
                 {
                     using (CefSharp.DevTools.DevToolsClient client = browser.GetDevToolsClient())
                     {
                         var dom = client.DOM.GetDocumentAsync();
                         var querySelectorResponse = await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId,"#fileupload");
                         _ = client.DOM.SetFileInputFilesAsync(new string[] { @"C:\Users\Chris\Desktop\capture.jpg" },querySelectorResponse.NodeId);
                         _ = client.DOM.SetFileInputFilesAsync(new string[] { @"C:\Users\Chris\Desktop\capture1.jpg" },querySelectorResponse.NodeId);
                     }
                 });

当我再次尝试时，出现以下错误： 生成的 MessageId 100005 与返回的 Message Id 100001 不匹配

** 编辑 2021 年 1 月 7 日 #3 - 我认为这有效。

 if (client == null)
                {
                    client = browser.GetDevToolsClient();
                    dom = client.DOM.GetDocumentAsync();
                }
                
                await Task.Run(async () =>
                 {                                              
                         var querySelectorResponse = await client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId,"#fileupload");
                         _ = client.DOM.SetFileInputFilesAsync(new string[] { filename },querySelectorResponse.NodeId);                                             
                 });

解决方法

感谢 amaitland 为我提供的所有帮助。 这是我用来实现这一切的代码。

if (client == null)
   {
      client = browser.GetDevToolsClient();
      dom = client.DOM.GetDocumentAsync();
   }
                
await Task.Run(async () =>
   {                                              
      var querySelectorResponse = await 
           client.DOM.QuerySelectorAsync(dom.Result.Root.NodeId,"#fileupload");
      _ = client.DOM.SetFileInputFilesAsync(new string[] { filename },querySelectorResponse.NodeId);                                             
    });

我收到错误消息：

生成的 MessageId 100005 与返回的 Message Id 100001 不匹配

直到我移动了

  client = browser.GetDevToolsClient();
  dom = client.DOM.GetDocumentAsync();

在 task.run 之外...我不确定为什么会这样，但确实如此。所以...上面的代码是我在用户单击 Windows 窗体上的 SCREEN CAPTURE 按钮来捕获屏幕截图后使用的代码。我将文件保存到磁盘 (jpg)，然后使用此代码将新创建的 jpg 文件附加到网页。