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

【问题标题】：How do I programmatically add a file attachment to a webpage using CEF WinForms如何使用 CEF WinForms 以编程方式将文件附件添加到网页
【发布时间】：2021-01-05 00:56:22
【问题描述】：

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

我可以轻松地将文件保存到桌面，这很容易而且没有问题。我也试过了

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

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

我可以使用 javascript（脚本）选项并以某种方式以编程方式将此文件放入页面中的 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 与返回的 MessageId 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);                                             
                 });

【问题讨论】：

可能最简单的选择是使用 DevTools 协议 chromedevtools.github.io/devtools-protocol/tot/DOM/… CEF 支持将 DevTools 命令直接发送到浏览器。请为您正在使用的 CEF 包装器添加标签。
感谢您对 DevTools 的评论。我找不到合适的例子。你知道吗？
您在使用 CefSharp 吗？如果是，请添加标签。如果您使用 CefGlue，答案会有所不同。
是的。 CefSharp WinForm
我认为它应该大致看起来像gist.github.com/amaitland/… 什么我在记事本中写的，所以可能有错误。 API 文档位于 cefsharp.github.io/api/86.0.x/html/R_Project_Documentation.htm，也请参考 DevTools API。

标签： c# file-upload cefsharp chromium-embedded

【解决方案1】：

感谢 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 与返回的 MessageId 100001 不匹配

直到我搬家

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

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

【讨论】：