替换带有“真棒字体"的“选择文件"图标使克隆的图像预览无法操作 [英] Replacing Choose File with Font Awesome icon makes cloned image preview inoperable
问题描述
显然，我不知道如何将字体真棒元素绑定到克隆的表单.我尝试了所有操作，但是克隆表单上的图像仍保留原始消息.
Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
图像预览已在克隆表单上起作用.之后首先在html上，我在<input type="file"上方添加了带有相机图标的字体真棒元素.其次，在javascript上，我添加了一个触发字体真棒元素的函数，该函数可用于原始消息提交.第三，我创建了iClone()函数，以使用jQuery抓取字体真棒元素后查找，触发和更改字体真棒和输入文件的data-count号.第四，我创建了var cloneCount = 0;变量，该变量最初设置为0，以递增和更改克隆表单的ID名称.第五，我创建了var bindFileChange = function(cloneCount) {变量，将真棒字体和文件输入元素绑定到具有新表单ID名称的新表单.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
下一步，在进行实际克隆的回复按钮$("button").click(function(){上，首先，cloneCount++;递增cloneCount，即新表单的ID名称.其次，它将克隆表单并向其中添加新的ID名称.第三，它运行iClone函数.最后，它运行bindFileChange(cloneCount);函数.这应该将真棒字体和输入文件都绑定到具有新ID的新表单.但这不起作用.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
这是测试用例的链接，在该示例中，我尝试在JSBin上将真棒字体添加到克隆的图像预览中: https://jsbin.com/cepanet/4/edit?js
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
而且，这是用于在JSBin上克隆无字体效果的图像预览的功能代码的链接: https://jsbin.com/xexejur/10/edit?html,js，输出
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
推荐答案
-
使用标签，并为
[for]属性分配输入ID的值:Use a label and assign it
[for]attribute with the value of the input id:<label for='upload'></label> <input id='upload' type='file'>单击标签后，与其关联的输入也将显示.
When the label is clicked then the input that it is associated with is as well.
委托自加载页面以来存在的祖先标签上的事件.将代表您要定位的所有适用标签的选择器传递给第二个参数(称为
Event.data).Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called
Event.data).$('main').on('click change', '.file, .upload, .reply', function(e) {...-
如果要克隆的源中包含不需要的内容，则克隆会变得很复杂.仅克隆
<template>的内容或呈现htmlString可能会更容易.下面的演示将演示后者. Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a
<template>or just render a htmlString. The following demo does the latter.有99％的时间最好将所有
<script>标记放在</body>结束标记之前(请参见演示的HTML).99% of the time it's optimal to place all
<script>tags before the</body>end tag (see HTML of Demo).let count = 0; $('main').on('click change', '.file, .reply, .upload', function(e) { if ($(this).is('.reply')) { ++count; const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`; $('main')[0].insertAdjacentHTML('beforeend', htmlString); } else if ($(this).is('.file')) { $(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0])); $(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop()); } else if ($(this).is('.upload')) { $(this).closest('form').submit(); e.stopPropagation(); } else { return false; } }); $('body').tooltip({ selector: '.tip' });i.tip.btn:hover { color: #fff; background: #000; cursor:pointer; }<!DOCTYPE html> <html> <head> <title>Test Case</title> <meta charset="utf-8"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous"> </head> <body> <main class='container'> <form id='box' class='input-group form-row' method='post' enctype="multipart/form-data"> <label class='input-group-prepend' for='image' style='display:block;min-height:120px'> <figure class='input-group-text' style='min-height:100%'> <i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption> </figure> </label> <input id='image' name='image' class="file" type="file" data-count="0" style="display: none;"> <section class=' input-group-append' style='max-height: 120px'> <fieldset class='btn-group-vertical' style='min-height: 100%'> <button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button> <button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button> </fieldset> </section> </form> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> <!--This is where the jQuery/JavaScript would be placed--> </script> </body> </html>这篇关于替换带有“真棒字体"的“选择文件"图标使克隆的图像预览无法操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
