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">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();
}
}
当您动态添加一个新元素时,您不能再使用标准的.change
函数来处理它,您必须使用.on
函数。
所以不是:
$(".fileUpload").change(readURL);
必须使用:
$("form").on('change', '.fileUpload', readURL);
JSFiddle: https://jsfiddle.net/m8uda7vb/
相关文章:
- 如何jQuery-Add按钮最多插入10个新输入
- 忽略新输入,直到 setTimeout() 完成
- 如何将新输入的文本包装到下面已经存在的span标记中
- 如何让JavaScript控制台用户输入工作(node.js)
- 如何让表单输入工作的 JavaScript 验证
- 在页面中添加新输入未运行脚本
- 如何使用 JavaScript 使用 AngularJS 模型动态添加新输入
- 在 React 中向组件添加新输入并跟踪状态
- Google表格脚本,用于将一张工作表上的几个单元格值传递给新的工作表行
- 如何显示以前的用户输入以及新输入
- 我使用jquery创建输入字段,刷新页面后如何保持这个“新输入值”的存在
- 如果其他输入已填充,如何动态添加新输入 角度
- 如何从文本区域获取新输入的文本
- JS,在数组中添加新输入,如果达到 10,则希望“中断”
- 新输入的值(通过 appendChild)不会通过表单传输
- 将输入记录到数组中,仅打印新输入
- 为什么不'这是Nightmarejs中修补的异步输入工作
- 添加新输入并在不修改 HTML 的情况下使用它
- jQuery文件上传预览/删除图像不工作的新输入
- 添加新输入后不是工作类.numeric.我该怎么办?