Вопрос выбора 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

Это тоже сделает:

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

Это позволит найти элементы управления файлом в публикуемой форме независимо от структуры разметки (и без необходимости знать идентификатор элемента управления).

TMTOWTDI , как говорят монахи Perl.

Answer 3

Вы должны сделать это точно так же: с хешем (#):

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

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

Answer 4

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

});

, если вы хотите выбрать все изображения в форме, которую вы можете использовать:

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

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

});

Answer 5

Зачем вам нужно выбрать этот элемент? Вы бы сделали это с $('#id_profile_pic'), но не должны ли вы просто отправить форму, чтобы она действительно загружалась?