jQuery文件上传预览/删除图像不工作的新输入 [英] jQuery file upload preview/remove image not working for new inputs

问题描述

您可以在 jsfiddle 找到代码

图片预览和移除功能工作时间早（ jsfiddle ），现在我使用了+ 按钮添加更多输入。但现在图像预览不工作也删除div不工作的新输入。请检查工作代码并帮我解决。

html

 < form> 
< div class =form-group portfolioimgdiv width100> 
< h5 class =control-label bold>投资组合图片< / h5> 
< div class =socialmediaside2> 
< input type =textclass =form-controlname =portfolioimgtitle []maxlength =10placeholder =Image Title/& 
< div class =form-group hirehide is-empty is-fileinput width100 martop10> 
< input class =fileUploadaccept =image / jpeg，image / jpgname =profilepic []type =filevalue =选择文件> 
< div class =input-group> 
< input class =form-controlrequired id =uploadreplaceholder =Portfolio Imagereadonly>< span class =input-group-btn input-group-sm> class =btn btn-fab btn-fab-minitype =button>< i class =material-icons> attach_file< / i>< / button>< / span> 
< / div> 
< / div> 
< / div> 
< div class =removebtnimg> 
< button type =buttonclass =btn btn-default btn-sm bckbtn addmore_img>添加< span class =glyphicon glyphicon-plus>< / span>< / button> 
< / div> 
< div class =upload-demo col-lg-12> 
< img alt =your imageclass =portimgsrc =＃> 
< / div> 
< / div> 
< / form> 
  

Jquery

  $（'。portfolioimgdiv'）。on（'click'，'.remove_field'，function（）{
 $（this）.parent $ b}）; 
 $（'。addmore_img'）。click（function（）{
 $（'。portfolioimgdiv：last'）。after（'< div class =form-group portfolioimgdivnext width100> ; div class =socialmediaside2>< input type =textclass =form-controlname =portfolioimgtitle []maxlength =10placeholder =Image Title/>< div class = form-group hirehide is-empty is-fileinput width100 martop10>< input class =fileUploadaccept =image / jpeg，image / jpgname =profilepic []type =filevalue =选择文件>< div class =input-group>< input class =form-controlrequired id =uploadreplaceholder =Portfolio Imagereadonly>< span class = group-btn input-group-sm>< button class =btn btn-fab btn-fab-minitype =button>< i class =material-icons> attach_file< / i ;< / button>< / span>< / div>< / div>< / div>< div class =removebtnimg>< button type =buttonclass =btn btn- btn-sm remove_field>< span class =glyphicon glyphicon-trash>删除< / span>< / button>< / div>< div class =upload-demo col-lg-12 >< img alt =your imageclass =portimgsrc =＃>< / 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 =buttonclass =delbtnmrg26 removebtnvalue =remove>< i class =fa fa-timesaria-hidden =true> ;删除< / i>< / button>'）; 
} 
 reader.readAsDataURL（this.files [0]）; 
} 
} 
 $（。fileUpload）。change（readURL）; 
 $（form）。on（'click'，'.delbtnmrg26'，function（e）{
 reset（$（this））; 
}）; 
 
函数重置（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'）。 
} 
 elm.remove（）; 
} 
} 
  

解决方案

你动态添加一个新的元素，你不能再使用标准的 .change 函数，你必须使用 .on

$（。fileUpload） .change（readURL）;

您必须使用：

$（form）。on（'change'，'.fileUpload'，readURL）;

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

You can find the code at jsfiddle

Image preview and remove function was working early (jsfiddle), now I used "+" button to add more inputs. But now image preview is not working also remove div is not working for new inputs. Please check the working code and help me to solve it.

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>

Jquery

$('.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();
  }
}

解决方案

When you add a new element dynamically, you no longer can work with it using standard .change function, you must use .on function.

So instead of:

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

you must use:

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

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

这篇关于jQuery文件上传预览/删除图像不工作的新输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！