如何在 Clojure 中预览文件上传的图像和文件名？

Question

我想上传一张图片，显示图片的预览，以及关联的文件名，所有这些都在 Clojure 中。

http://jsfiddle.net/LvsYc/638/ 中的示例演示了我想做的事情，但我想在 Clojure/ClojureScript 中使用它。

我试图重写上面的代码 link，并设法使用 (js/console.log) 将文件名输出到控制台。我的文件中有两个全局原子，一个用于图像名称，一个用于图像本身。我下面的代码是我到目前为止的尝试。

我需要为 1) 做什么。从控制台日志中获取文件名，并使用这些原子在 :span.file-name 中显示它，以及 2)，显示图像预览？

(def image (atom "#"))
(def image-name (atom nil))


(def file-upload-selector
  "Implements a file-upload button, allowing the user to 
   navigate to a file on their desktop and select it."
  (let 
      [reader (js/FileReader.)
       _ (set! (.-onload reader)
               (fn [e]
                 (reset! image
                         (-> e .-target .-result  ))))
       read-url
       (fn [input]
         (reset! image-name (-> input .-target .-files (aget 0) .-name))

         (js/console.log (-> input .-target .-files (aget 0) .-name))
                   (when-let [file-input (.-files input)]  
                     (.readAsDataURL reader (aget file-input 0))))]


      (fn []
        [:div.file.has-name.is-boxed
         [:label.file-label
          [:input.file-input {:type "file"
                              :name "User_Photo"
                              :id "file"
                              :on-change read-url}]
          [:span.file-cta
           [:span.file-icon
            [:i.fas.fa-upload]]
           [:span.file-label "Upload profile picture" ]

           ][:img {:src image :alt "your image" }]
          [:span.file-name {:id  "filename" } image-name
           ]]])))

Answer 1

找到适合我的解决方案。上网查了一下，下面的githublink就是我需要的

https://github.com/jlangr/image-upload/blob/master/src/cljs/image_upload/core.cljs

相关代码来自@jlangr.

  (let [file (first (array-seq (.. file-added-event -target -files)))
        file-reader (js/FileReader.)]
    (set! (.-onload file-reader)
          (fn [file-load-event]
            (reset! preview-src (-> file-load-event .-target .-result))
            (let [img (.getElementById js/document img-id)]
              (set! (.-onload img)
                    (fn [image-load]
                      (.log js/console "dimensions:" (.-width img) "x" (.-height img)))))))
    (.readAsDataURL file-reader file))) 



 (defn image-upload-fn []
  [:div [:h2 "image-upload"]
   [:input {:type "file" :on-change load-image}]
   [:img {:id img-id :src @preview-src}]])

如何在 Clojure 中预览文件上传的图像和文件名？

How to preview an image and filename for a file upload in Clojure?

file-upload

clojurescript