Shiny vs JSFiddle中文件输入的文件列表

Question

下面的应用程序包含一个文件输入和一个按钮，该按钮在单击时控制台记录文件输入的 FileList 对象。

在 Shiny 应用程序中，当我选择一个文件时，帮助文本会短暂更改为所选文件的名称，然后再恢复为“未选择文件”。单击“显示所选文件”按钮会返回一个空的 FileList。

这是应用程序：

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$script(HTML("
  
  $('#get').click(function() {
      console.log($('#file')[0].files)
  })

});"))
    ),
    HTML('
<input id="file" name="file" type="file">
<button id ="get">Show selected file</button>')
  ), 
  server = function(input, output, session) {}
)

在 JSFiddle 中，当我选择一个文件时，帮助文本会更改以显示所选文件的名称。点击按钮返回一个长度为 1 的 FileList。

Here is the JSFiddle

是什么导致了文件输入行为的这些差异？在 Shiny 中，我可以使用 onchange 事件来检查文件是否已上传（使用类似 $('#file').change(function() { $('#file')[0].files.length }); 的东西）但是 如果文件输入的值不是持久的，我如何在更改事件发生后执行检查？ 选择文件后在控制台中键入 $('#file')[0].files.length 会为 Shiny 应用返回 0 和1 用于 JSFiddle。

我查看了shiny.js 中文件输入的 Shiny 输入绑定，有一个 FileUploader 函数，但在其中找不到任何内容，或者在选择后重置文件输入值的 fileInputBinding。

Answer 1

可能是这样的：

js <- "
$(document).ready(function(){
  var x = null;
  $('#file').on('change', function(){
    x = $('#file')[0].files.length;
  });
  $('#get').click(function() {
    console.log(x);
  })
});
"

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$script(HTML(js))
    ),
    HTML('
<input id="file" name="file" type="file">
<button id ="get">Show selected file</button>')
  ), 
  server = function(input, output, session) {}
)