使用FileReader API打开文件时出现问题

101

克拉塔克

几天来一直困扰着我。我有一个Web应用程序，允许用户从其本地计算机上打开文档。我是FileReader第一次使用API。

除了一个用例，它可以正常工作。

打开一个文档文件。
以编程方式创建一个新文档，覆盖现有文档。
打开与上面相同的文件。

执行此序列后，第二次尝试将以静默方式失败（除非未加载文件）。

这是一个示例试剂程序（从figwheel-main模板创建），说明了该问题。

(ns a-bad-button.core
  (:require [reagent.core :as r]))

(def app-state-ratom (r/atom nil))

(defn new-doc []
  {:doc-text "Some MINIMAL text to play with."})

(defn add-new-button
  [aps]
  (fn [aps]
    [:input.tree-demo--button
     {:type     "button"
      :value    "New"
      :on-click #(reset! aps (new-doc))}]))

(defn load-doc-data!
  [aps file-data]
  (swap! aps assoc :doc-text file-data))

(defn handle-file-open-selection
  [aps evt]
  (let [js-file-reader (js/FileReader.)]
    (set! (.-onload js-file-reader)
          (fn [evt] (load-doc-data! aps (-> evt .-target .-result))))
    (.readAsText js-file-reader (aget (.-files (.-target evt)) 0))))

(defn add-open-button
  [aps]
  (fn [aps]
    [:div
     [:input {:type      "file" :id "file-open-id"
              :style     {:display "none"}
              :on-change #(handle-file-open-selection aps %)}]
     [:input {:type     "button"
              :value    "Open"
              :on-click #(.click (.getElementById js/document "file-open-id"))}]]))

(defn a-bad-button
  [aps]
  (fn [aps]
    [:div
     [:h4 "A Bad Button"]
     [:p#doc-text-p (or (:doc-text @aps) "Loaded text will go here.")]
     [add-new-button aps]
     [add-open-button aps]]))

(defn mount! [el]
  (reset! app-state-ratom (new-doc))
  (r/render-component [a-bad-button app-state-ratom] el))

(defn mount-app-element []
  (when-let [el (.getElementById js/document "app")]
    (mount! el)))

(mount-app-element)

(defn ^:after-load on-reload []
  (mount-app-element))

对于println调试消息，似乎执行已到达:on-click函数中的处理程序add-open-button，但handle-file-open-selection从未到达或执行处理程序。

失败发生在Safari，Opera，Brave和Vivaldi浏览器上。文件会在Firefox上按预期打开。

有人看过并修复过吗？

阿尔弗朗西斯

类似问题：

FileReader-再次上传相同文件不起作用

在Chrome中选择相同文件时，不会触发FileReader onload

基本上，问题在于选择相同文件时不会触发onChange。一种解决方法是在文件浏览器打开之前将文件输入的值设置为""，以始终触发onChange事件。在您的情况下，看起来就像将handle-file-open-selection功能更改为：

(defn handle-file-open-selection
  [aps evt]
  (let [js-file-reader (js/FileReader.)]
    (set! (.-onload js-file-reader)
          (fn [evt]
            (load-doc-data! aps (-> evt .-target .-result))))
    (.readAsText js-file-reader (aget (.-files (.-target evt)) 0))
    ;; add this
    (set! (.-value (.getElementById js/document "file-open-id")) "")
    ))

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。