如何在Shiny应用中监听文件上传启动事件？

需求明确：要在用户选择文件并点击“打开”（上传实际启动）时触发JS事件，用来记录起始时间，后续在上传完成后计算总耗时。之前的两种尝试都没踩准时机：

• 给fileInput加onclick：触发太早，用户刚点上传按钮还没选文件就触发，且重复触发
• 监听shiny:inputchanged：触发太晚，需等上传完成后才触发，无法记录起始时间

正确做法是监听文件输入框的change事件——用户选完文件点击“打开”后，文件输入框内容更新，该事件会立即触发，刚好对应上传启动的时刻。以下是完整可运行示例：

library(shiny)

ui <- fluidPage(
  tags$head(tags$script(r"(
    // 监听文件输入框的change事件
    $('#file').on('change', function() {
      // 获取当前时间戳（毫秒），传给Shiny的响应式值
      const startTime = Date.now();
      Shiny.setInputValue('upload_start_time', startTime);
      // 测试用alert，实际使用可删除
      alert('上传已启动，记录起始时间：' + startTime);
    });
  )")),
  fileInput("file", "Upload File"),
  verbatimTextOutput("upload_duration")
)

server <- function(input, output, session) {
  # 监听上传完成事件，计算耗时
  observeEvent(input$file, {
    if (!is.null(input$upload_start_time)) {
      const endTime = Date.now();
      const duration = (endTime - input$upload_start_time) / 1000; // 转换为秒
      output$upload_duration <- renderPrint({
        paste0("文件上传总耗时：", round(duration, 2), " 秒")
      })
    }
  })
}

shinyApp(ui, server)

代码说明 #

• JS部分：给id为file的文件输入框绑定change事件，触发时获取当前时间戳，通过Shiny.setInputValue将时间传递给Shiny端的upload_start_time响应式输入
• Server部分：当input$file更新（上传完成）时，用当前时间减去起始时间，计算出上传总耗时并展示

内容的提问来源于stack exchange，提问作者David