jQuery - сброс ввода файла и кнопка обновления при нажатии

#jquery

Вопрос:

Только когда файл загружен и .submit нажат, кнопка изменит свой HTML с 'Submit' на 'Sent' . Я хочу вернуть кнопку в исходное состояние после того, как она была очищена нажатием .reset кнопки.

Проблема в том, что я не знаю, как очистить файл и вернуть кнопку возврата к html 'submit' .

 $(document).on("click", ".submit", function(e) {
  var $uploader = $(this).closest(".item").find("input");
  if ($uploader.val() !== "") {
    e.preventDefault();
    $(this).html("Sent");
  } else {
    console.log("Please upload a file");
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="elements">
    <input type="file">
    <button class="reset">reset</button>
  </div>
  <button class="submit">Submit</button>
</div>

Ответ №1:

Просто установите значение обратно в пустое, как для любого ввода, который вы хотите очистить:

 $uploader.val("")

И установите кнопку обратно так же, как вы ее установили sent

 .html("Submit")

Также добавлен код для кнопки сброса.

 $(document).on("click", ".submit", function(e) {
  var $uploader = $(this).closest(".item").find("input");
  if ($uploader.val() !== "") {
    e.preventDefault();
    $(this).html("Sent");
    $uploader.val("")
  } else {
    console.log("Please upload a file");
  }
});

$(document).on("click", ".reset", function(e) {
  var $uploader = $(this).closest(".item").find("input");
  var $submit = $(this).closest(".item").find(".submit");
    $submit.html("Submit");
    $uploader.val("")
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="elements">
    <input type="file">
    <button class="reset">reset</button>
  </div>
  <button class="submit">Submit</button>
</div>