用于通知文件上传完成的输入文件按钮的 Javascript答案

【问题标题】：Javascript for input file button in order to notify that file upload is complete用于通知文件上传完成的输入文件按钮的 Javascript
【发布时间】：2015-09-20 20:35:27
【问题描述】：

我目前正在为我的网站的输入文件按钮设置样式。到目前为止，我已经更改了本机输入文件的不透明度，因此它不会显示，并给它一个 z-index 2，所以按钮仍然是可点击的。问题是，如果没有输入文件的本机行为，我无法知道文件何时完成上传。如何添加显示一点点的 JS/JQUERY：

<i class="fa fa-check"></i>

文件上传完成后在我的按钮旁边。

这是我的 html 的样子：

 <%= simple_form_for @user do |f| %>
   <div class="upload-file-container">
      <%= f.file_field :licencepicture, id: "myFileInput" %>
      <div id="fileName"></div>
   </div>
<% end %>

【问题讨论】：

可以提供你的js代码吗？
你是什么意思？我实际上正在寻找一些 JS 来做到这一点，因为我自己没有写出任何好的东西
您可以发布您写的内容以便我们为您提供帮助吗？我们不仅仅是为人们编写代码

标签： javascript jquery file input erb

【解决方案1】：

如果您尝试从输入文件按钮获取上传文件的结果，您可以使用 FileReader 类获取它。这样您就可以查看您的文件是否已上传到您的输入类型文件。

HTML：

<input id="fileInpt" type="file"/>
<br/>
<img id="imagePreview" alt="image preview" />

JQuery:

 $("#fileInpt").on("change", function(){

    if (input.files && input.files[0]) {

        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);

        reader.onload = function (e) {
            //With this e object you can get anything you want from input
            //type file. The content of uploaded file, for example:
            //e.target.result;
            $("#imagePreview").attr("src", e.target.result);

            alert("Load content is finished!");
        }
    }
});

但是，如果您想查看上传结果，则必须使用 ajax 使用 jquery 或纯 javascript。

$.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  $( "#log" ).html( msg );
});

request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

【讨论】：

【解决方案2】：

当通过 ajax 完成文件上传时，您将有一个成功回调，将其添加到那里，就像这样（这段代码有点粗糙，但应该让您知道目标是什么）：

$("#myFileInput").on("change", function(e){
    var file = e.target.files[0];
    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open(myMethod, myURL, true);
    xhr.onload = function(e) {
    if(xhr.status === 200) {
      $("#myFileInput").after('<i class="fa fa-check"></i>');
    }
    else {
      console.log("error");
    }
  };
  xhr.send(formData);
});

【讨论】：

我不明白为什么在这里需要 AJAX。我没有编写任何 AJAX 行来获取我的文件。我认为一切都由rails照顾？（我更新了帖子）
好吧，如果您没有进行整页重新加载或 iframe 重新加载，则在某处使用了 ajax。尽管如此，这个想法是在文件上传后在成功处理程序中添加$("#myFileInput").after('<i class="fa fa-check"></i>');。

【解决方案3】：

这是我的解决方案：

$(document).ready(function(){
    realInputField = $('#myFileInput')
    realInputField.change(function() {
      $('#fileName').append( "<i class='fa fa-check'></i>" )
    });
});

【讨论】：