javascript - 在选择要上传的文件后添加侦听器

Question

我正在使用 rails file_field 标签上传文件，如下所示：

<%= f.file_field :image, :class => 'file_field' %>

使用一些 css 解决方法，我创建了一个按钮来上传文件（整个东西都是可点击的）：

在用户点击按钮并选择一个文件后，我想在用户提交表单之前给用户一些指示，表明一个文件已被选择上传。否则，用户将不知道文件已被选中。

我可以使用什么方法（无论是在 Rails 中还是在 Javascript 事件处理程序中）允许我向用户提供这样的指示？

Answer 1

这应该可以解决问题。它在 jQuery 中，但将其转换为直接使用 javascript 并不太难

第一：一些带有文件输入的 HTML：

<div>
  Click to upload a file. <input type="file" id="fileUploader" />
  <br />
  <span id="fileName"><em>No File Chosen Yet</em></span>
</div>

现在的javascript：

<script type="text/javascript">

//bind to change event to determine when user chooses a file to upload
$("#fileUploader").bind("change", function (e)
{
    //get the file path
    var file = $("#fileUploader").val();

    //pull out the filename
    file = file.replace(/^.*\\/i, "");

    //show to user
    $("#fileName").html("You chose: " + file);
});

</script>