我想为一个项目创建多个图像。我的问题是当我点击 时添加 按钮,输入类型 = 'file' 标签被创建,但是当 我点击创建的标签,它不起作用,只有最初可用的第一个选项有效。
在 Html
<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
<div class="row-file-upload">
<div class="col-lg-6 col-md-6 m-t-10 row clearfix">
<button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
<div class="file-upload">
<div class="file-select">
<div class="file-select-name fileName">Choos File</div>
<div class="file-select-button">... Choose File</div>
<input type="file" class="chooseFile">
</div>
</div>
</div>
</div>
在脚本中
<script type="text/javascript">
$(document).ready(function () {
$('body').on('click',
'.bClear',
function (event) {
event.preventDefault();
var $el = $('.chooseFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
$('.chooseFile').trigger('change');
});
$('body').on('change', '.chooseFile', function () {
var filename = $(".chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$(".fileName").text("فایل انتخاب نشده");
}
else {
$(".file-upload").addClass('active');
filename = filename.replace("C:\\fakepath\\", "");
if (filename.length > 30) {
filename = filename.substring(0, 30) + '...';
}
$(".fileName").text(filename);
}
});
$('body').on('click', '#bAddImage', function () {
$('#row-file').append($('.row-file-upload').html());
});
});
</script>
最佳答案
这是一个将文件输入动态添加到 HTML 的简单示例。
$(document).ready(function() {
var wrapper = $(".wrapper");
var add_button = $(".Add");
var uploadField = document.getElementById("file");
$(add_button).click(function(e) {
e.preventDefault();
$(wrapper).append('<div><input type="file" name="att"/><a href="#"class="remove">Remove</a></div>');})
$(wrapper).on("click", ".remove", function(e) {
e.preventDefault();
$(this).parent('div').remove();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<a href="#" class="Add">+ Add</a>
<div>
<input type="file" id="file" name="att">
</div>
</div>
关于javascript - 当我想创建多个输入类型时选择文件时出现问题 = 'file',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64604791/