在选择要上载的文件后添加侦听器

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>