jQuery 选择器问题

Question

jQuery 新手。

我有以下 html：

  <form enctype="multipart/form-data" action="/upload/" method="post"> 
      <div class="field"> 
          <label for="id_profile_pic">Profile Pic</label> 
          <input type="file" name="profile_pic" id="id_profile_pic" /> 
      </div> 

      <div> 
      <span>Profile Picture</span> 
      <img src="/site_media/profile_pic/4e17c792-3c34-4556-8c67-135bc931eb5a.jpg"/> 
      <input type="button" value="Upload" id="upload_button" /> 
      </div> 
  </form> 

我需要以下函数中选择器的帮助，

  $('#upload_button').click(function() {
    //how can I select the file input element (ie. #id_profile_pic) here? 
  });

谢谢。

Answer 1

您可以像在初始选择器中定位第一个元素一样定位该元素：

  $("#id_profile_pic").doStuff();

您还打算对此做更多的事情吗？

Answer 2

为什么需要选择该元素？您可以使用 $('#id_profile_pic') 来完成此操作，但您不应该只提交表单以便实际上传吗？

Answer 3

$('#upload_button').click(function() {
    // to select it here you just need
    $('#id_profile_pic')

});

如果你想选择表单中的所有图片，你可以使用：

$('#upload_button').click(function() {

    $(this).parent().find('img');

});

Answer 4

您应该以完全相同的方式执行此操作：使用哈希值 (#)：

$('#upload_button').click(function() {
    var fileUploadPic = $('#id_profile_pic');

    var value = fileUploadPic.val();
});

Answer 5

这也能做到这一点：

$('#upload_button').click(function(){
  var file = $(this).closest('form').find('input[type=file]') ;
  return ;
} ;

这将找到正在发布的表单中的文件控件，无论标记结构如何（并且不需要知道控件 ID）。

TMTOWTDI，正如 Perl 僧侣所说。