如果有 FileReader()，如何在 keyup 事件上激活提交按钮

Question

之前我为 textarea onkeyup disable/active 提交表单按钮

制作了这个 Javascript 代码

使用以下代码

<script>
$(document).ready(function(){
    $('.btn-sub').attr('disabled',true);
    $('#message').keyup(function(){
        if($(this).val().length !=0)
            $('.btn-sub').attr('disabled', false);           
        else
            $('.btn-sub').attr('disabled',true);
    })
});

一切都很好，

但是当我将它用于 HTML 输入（文件）有一个 FileReader() 它不工作提交按钮保持禁用使用以下代码

function readURL(input) {
  var id = $(input).attr("id");

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .editit').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("input[id^='upload_image']").change(function() {
  readURL(this);
});

<div class="form-group border-bottom pb-3 text-center imgx">
<label class="text-center" for="upload_image" style="cursor:pointer">
    <div class="upload-icon">
        <div class="position-relative">
     <div class="editit position-absolute"><i class="fas fa-user-edit"></i></div>
    <img class="prev" src="xx"/>
  </div>
 </div>
   </label>
  <input name="upload_image" id="upload_image" type="file" class="form-control form-control-lg text-right"  autocomplete="off">
  </div>

任何人的代码可以帮助我弄清楚如何检查 FileReader() 是否具有使提交按钮处于活动状态的值？

谢谢大家。

Answer 1

使用reader.result检查FileReader

中是否有文件

var reader = new FileReader();

function readURL(input) {
  var id = $(input).attr("id");

  if (input.files && input.files[0]) {

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .editit').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
      validate();
    }

    reader.readAsDataURL(input.files[0]);

  }
}

function validate() {
  if (reader.result)
    $('.btn-sub').attr('disabled', false);
  else
    $('.btn-sub').attr('disabled', true);
}
$(document).ready(function() {
  $('.btn-sub').attr('disabled', true);

  $("input[id^='upload_image']").change(function() {
    readURL(this);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group border-bottom pb-3 text-center imgx">
  <label class="text-center" for="upload_image" style="cursor:pointer">
            <div class="upload-icon">
                <div class="position-relative">
                    <div class="editit position-absolute"><i class="fas fa-user-edit"></i></div>
                    <img class="prev" src="xx" />
                </div>
            </div>
        </label>
  <input name="upload_image" id="upload_image" type="file" class="form-control form-control-lg text-right" autocomplete="off">
</div>
<input name="message" id="message" type="text">
<button class="btn-sub">SUBMIT</button>

如果有 FileReader()，如何在 keyup 事件上激活提交按钮

How to active submit button on keyup event if there's FileReader()

html

javascript

jquery

filereader

bootstrap-4