选择文件并在 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]);
});

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

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>

您能否提供一个禁用提交按钮的示例？

选择文件并在 javascript 中写入输入后，表单中的提交按钮不起作用

Submit button in form not working after choosing file with input written in javascript

html

javascript

forms

submit

filereader