javascript - jQuery 文件上传预览/删除图像不适用于新输入

Question

您可以在 jsfiddle 找到代码

图像预览和删除功能在早期工作(jsfiddle)，现在我使用“+”按钮添加更多输入。但是现在图像预览不起作用，删除 div 也不适用于新输入。请检查工作代码并帮助我解决它。

html

<form>
  <div class="form-group portfolioimgdiv width100">
    <h5 class="control-label bold">Portfolio Images</h5>
    <div class="socialmediaside2">
      <input type="text" class="form-control" name="portfolioimgtitle[]" maxlength="10" placeholder="Image Title" />
      <div class="form-group hirehide is-empty is-fileinput width100 martop10">
        <input class="fileUpload" accept="image/jpeg, image/jpg" name="profilepic[]" type="file" value="Choose a file">
        <div class="input-group">
          <input class="form-control" required id="uploadre" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type="button"><i class="material-icons">attach_file</i></button></span>
        </div>
      </div>
    </div>
    <div class="removebtnimg">
      <button type="button" class="btn btn-default btn-sm bckbtn addmore_img">Add<span class="glyphicon glyphicon-plus"></span></button>
    </div>
    <div class="upload-demo col-lg-12">
      <img alt="your image" class="portimg" src="#">
    </div>
  </div>
</form>

查询

$('.portfolioimgdiv').on('click', '.remove_field', function() {
  $(this).parent().parent().remove();
});
$('.addmore_img').click(function() {
  $('.portfolioimgdiv:last').after('<div class="form-group portfolioimgdivnext width100"><div class="socialmediaside2"><input type="text" class="form-control" name="portfolioimgtitle[]" maxlength="10" placeholder="Image Title" /><div class="form-group hirehide is-empty is-fileinput width100 martop10"><input class="fileUpload" accept="image/jpeg, image/jpg" name="profilepic[]" type="file" value="Choose a file"><div class="input-group"><input class="form-control" required id="uploadre" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type="button"><i class="material-icons">attach_file</i></button></span></div></div></div><div class="removebtnimg"><button type="button" class="btn btn-warning btn-sm remove_field"><span class="glyphicon glyphicon-trash">Remove</span></button></div><div class="upload-demo col-lg-12"><img alt="your image" class="portimg" src="#"></div></div>');
});

function readURL() {
  var $input = $(this);
  var $newinput = $(this).parent().parent().parent().find('.portimg ');
  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      reset($newinput.next('.delbtnmrg26'), true);
      $newinput.attr('src', e.target.result).show();
      $newinput.after('<button type="button" class="delbtnmrg26 removebtn" value="remove"><i class="fa fa-times" aria-hidden="true">Remove</i></button>');
    }
    reader.readAsDataURL(this.files[0]);
  }
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtnmrg26', function(e) {
  reset($(this));
});

function reset(elm, prserveFileName) {
  if (elm && elm.length > 0) {
    var $input = elm;
    $input.prev('.portimg').attr('src', '').hide();
    if (!prserveFileName) {
      $($input).parent().parent().find('input.fileUpload').val("");
      $($input).parent().parent().find('.input-group').find('input#uploadre').val("");
    }
    elm.remove();
  }
}

Answer 1

当你动态添加一个新元素时，你不能再使用标准的 .change 函数来处理它，你必须使用 .on 函数。

所以代替:

$(".fileUpload").change(readURL);

你必须使用:

$("form").on('change', '.fileUpload', readURL);

JSFiddle:https://jsfiddle.net/m8uda7vb/