动画文件输入Javascript

当用户在InputFile中选择一个文件时，我尝试创建一个动画。但它只在我重新加载页面时运行。所以我不知道如何解决这个问题。 这是我的密码

Html Erb（Rails）：

---

我猜想，当输入被更改时，您会希望运行此操作。可能使用

onChange

事件：

var browseInput=document.getElementById（“文件上传”）
browseInput.onchange=函数（）{
var fileBox=document.getElementById（“Box”）；
如果（browseInput.files.length！=0）{
fileBox.animate([
{transform:'translateY（0px）}，
{transform:'translateY（-150px）}
], {
持续时间：1000，
});
setTimeout（函数（）{
fileBox.className+=“淡入”；
}, 50);
setTimeout（函数（）{
fileBox.style.display='none'；
}, 1050);
}
}

 <div class="box" id="Box">
     <%= f.label 'Upload Your Song !', class:'label1', for:'fileUpload' %>
     <%= f.label 'Size: 15mb max', class:'label2', for:'fileUpload' %>
     <%= f.file_field :video, id:'fileUpload', style:'opacity:0;position:absolute;' %>
     <%= f.label 'Choose your file', for:'fileUpload', class:'btn-hover color-1 flex' %>
 </div>

<script>
    var Browse = document.getElementById("fileUpload")
    var File = document.getElementById("Box");
    var Upload = document.getElementById("Uploader");
    if( Browse.files.length != 0 ){
        File.animate([
          { transform: 'translateY(0px)' },
          { transform: 'translateY(-150px)' }
        ], {
          duration: 1000,
        });
      window.setTimeout( function() {
        File.className += ' fade-in';
      }, 50);
      window.setTimeout( function() {
        File.style.display = 'none';
      }, 1050);
    }
</script>

.fade-in {
    opacity: 0;
    transition:             opacity 1s;
        -moz-transition:    opacity 1s;
        -ms-transition:     opacity 1s;
        -o-transition:      opacity 1s;
        -webkit-transition: opacity 1s;
}