Javascript: DOM имеют miltiple li, и у каждого li есть форма, эта форма должна быть отправлена ​​wilh ajax

Question

У меня есть ul, которые содержат несколько li, и каждый li имеют форму с типом ввода как файл.

Как я могу представить каждую форму на on change()event из file выбор.

Вот код пропущено из HTML

<ul> 
      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar_1"> 
      </span> 
      </form> 
      </li> 

      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar"> 
      </span> 
      </form> 
     </li> 

      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar"> 
      </span> 
     </form> 
     </li> 

      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar"> 
      </span> 
     </form> 
     </li> 
      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar"> 
      </span> 
     </form> 
     </li> 
      <li> 
      <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div> 
      <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel"> 
      <!-- <input type="file" > --> 
      <input type="file" name="[avatar]" id="_avatar"> 
      </span> 
     </form> 
     </li> 

Любая помощь будет оценить !!!

Answer 1

Я не знаю, используете ли вы ajax, почему вам нужны разные кнопки отправки для отправки каждой формы ... вы можете использовать разные события для этих разных кнопок и принимать те данные, которые вы хотите отправить на сервер, используя ajax и отправить их индивидуально ...