javascript - 选择带有用javascript编写的输入的文件后，表单中的提交按钮不起作用

Question

我有用于创建带有图像的新产品的 html 表单，因此在选择产品图像后，我的 html 表单提交按钮将被禁用。我已经用 javascript 编写了文件输入操作。

这是我的html表单代码（一段代码）：

<form>
<div class="form-group alert-up-pd">
  <div class="small-12 large-4 columns">
    <label for="">Добавить изображение</label>
    <div class="containers">
      <div class="imageWrapper">
        <img class="image" src=""></div>
      </div>
      <span class="file-upload">
        <input type="file" name="img" class="file-input">
        Выбрать
      </span>
    </div>
  </div>
</div>
</form>

这是javascript代码：

$('.file-input').change(function(e){
  var curElement = $('.image');
  var reader = new FileReader();

  reader.onload = function (e) {
    curElement.attr('src', e.target.result);
  };

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

如果您需要更多信息，请询问...

标签： javascripthtmlformssubmitfilereader

Answer 1

您的代码似乎有效。尝试运行该片段：

$(function(){
    $('.file-input').change(function(e){
    var curElement = $('.image');
    var reader = new FileReader();

    reader.onload = function (e) {
      curElement.attr('src', e.target.result);
    };

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

.image
{
  width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-group alert-up-pd">
    <div class="small-12 large-4 columns">
      <label for="">Добавить изображение</label>
      <div class="containers">
        <div class="imageWrapper">
          <img class="image" src="" />
        </div>
        <span class="file-upload">
          <input type="file" name="img" class="file-input" />
          Выбрать
        </span>
      </div>
    </div>
  </div>
</form>

你能提供一个提交按钮被禁用的例子吗？