#javascript #html #jquery #search #textarea
#javascript #HTML #jquery #Поиск #текстовая область
Вопрос:
Заранее прошу прощения за мой английский, это не мой родной язык. Я создаю инструмент для личного использования. Это инструмент для генерации пути к изображению. Он используется для генерации нового пути для загруженных имен файлов изображений.
Для этого инструмента требуется 2 пользовательских ввода:
(1) Загрузка файлов изображений (может быть более одного)
(2) Введите новый путь к изображениям
Когда изображения загружены и сгенерированы, выходные данные будут отображаться внутри двух текстовых областей. В одной текстовой области отображается новый путь имена файлов изображений, в то время как во второй текстовой области отображаются только имена файлов изображений.
Я уже создал функцию строки поиска, и она работает, пока пользователь вводит, но проблема в том, как я могу вернуть исходные значения текстовой области, когда пользователь ничего не вводит в строке поиска?
ПРИМЕЧАНИЕ: Я создал функцию поиска только в разделе текстовой области Новый путь имена файлов изображения.
Коды:
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4 CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
// THIS IS THE SEARCH BAR FUNCTION
$('#searchDir').keyup(function()
{
var val = $(this).val();
var lines1 = $('#outputText').val();
lines1 = lines1.split(/n/);
var originalDirect = [];
for(var o=0; o < lines1.length; o )
{
// var text0 = lines1[o];
originalDirect.push((lines1[o]));
console.log(originalDirect);
}
if(val != null)
{
// $(lines1).hide();
var searchDirect = [];
for (var a=0; a < lines1.length; a )
{
var text = lines1[a];
if(text.indexOf(val) != -1)
{
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('n'));
// $(lines1).each(function()
// {
// var text = $(this).text().toLowerCase();
// if(text.indexOf(val) != -1)
// {
// $(this).show();
// }
// });
}
else if(val == null)
{
$('#outputText').val(originalDirect.join('n'));
}
});
$('.output1').hover(function(){
$('.copy-btn1').addClass('copy-btn-show');
}, function(){
$('.copy-btn1').removeClass('copy-btn-show');
});
$('.output2').hover(function(){
$('.copy-btn2').addClass('copy-btn-show');
}, function(){
$('.copy-btn2').removeClass('copy-btn-show');
});
$('.copy-btn1').click(function()
{
$('.copy-btn1').attr('data-content', 'Copied to clipboard!')
$('.copy-btn1').popover('show');
var copyText = $('#outputText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
});
$('.copy-btn2').click(function()
{
$('.copy-btn2').attr('data-content', 'Copied to clipboard!')
$('.copy-btn2').popover('show');
var copyText = $('#filenameText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
});
});
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i ) {
// var p = document.createElement("p");
// p.innerHTML = addtext input.files[i].name;
outputData.push((addtext input.files[i].name));
fileNames.push((input.files[i].name));
countSrc ;
// ul.appendChild(p);
}
if(!ul.hasChildNodes()) {
// var p = document.createElement("p");
// p.innerHTML = 'No Files Selected';
// ul.appendChild(p);
}
$('#outputText').val(outputData.join('n'));
$('#filenameText').val(fileNames.join('n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor)
{
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
// $('#countImg').html(input.files.length " Images");
if (input.files.length == 0)
{
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else if (input.files.length == 1)
{
$('#labelUpload').html(input.files.length " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else
{
$('#labelUpload').html(input.files.length " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
</script> body
{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:#20629F!important;
background-color:rgba(204, 230, 255, 0.76) !important;
/* color:#20629F!important;*/
/* color:white!important;*/
/* background-color:rgb(204, 230, 255, 0.07) !important;*/
/* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}
h1, h2, h3, h4, h5, h6
{
font-weight: 600;
}
h4
{
/* color:#061420!important;*/
/* color:white!important;*/
color:#093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav
{
position: fixed;
z-index:6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle
{
position: absolute;
z-index:-1;
right:-0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width:50%;
}
#howToContainer .howToTitle span
{
display: inline-block;
vertical-align: middle;
float:right;
color:#2675BF;
}
#howToContainer .howToTitle span img
{
width:40px;
height:40px;
margin-left:1em;
background-color:#2675BF;
border-radius:0px 10px 10px 0;
}
#howToContainer:hover .howToTitle{
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span
{
color:white;
font-weight: bold;
}
#howToContainer .howToText
{
border: 1px solid rgba(51, 156, 255);
border-radius:10px;
background-color: white;
width:600px;
padding:1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li
{
font-size: 14px;
color:#20629F!important;
}
#howToContainer:hover .howToText
{
color:#061420!important;
font-weight: 400;
border:1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput
{
text-indent:8px;
font-size:14px !important;
/* color:#0C253C!important;*/
color:#20629F!important;
font-weight: 400;
height:100%;
}
.directoryInput::placeholder
{
font-style:italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus
{
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border:none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder
{
color:rgba(38, 117, 191, 0.65);
font-size:13px;
}
.fa-search
{
color:#2D89DF;
position: absolute;
float:right;
right:1em;
top:0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1, .copy-btn2
{
border:1px solid rgb(38, 117, 191);
padding:7px 30px;
margin-right:6px;
border-radius:7px 7px 0px 0px;
border-bottom:none;
transform: translate3d(0, 28px, -1px);
color:#2D89DF !important;
transition:all .3s;
z-index: -1;
}
.copy-btn-show{
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border:1px solid #2D89DF;
border-bottom:none;
/*background-color:#2D89DF;*/
color:#2D89DF !important;
z-index: -1;
cursor:pointer;
user-select: none;
font-weight:800;
}
.copy-btn-show:hover
{
background-color:#2D89DF;
color:white !important;
}
/*END OF Copy Button*/
#genButton
{
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color:#2D89DF;
padding:0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color:white!important;
font-weight: bold;
font-size:15px;
}
#genButton:hover
{
/* border: 1px solid rgb(19, 59, 96);*/
background-color:rgb(19, 59, 96);
color:white!important;
}
.inputTA
{
display:inline-block;
margin:3px 20px 0 20px;
}
.inputTA2
{
display:inline-block;
margin:3px 20px 0 20px;
}
.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
border-radius:5px;
width:800px;
height:500px;
font-size:13px !important;
color:#0C253C!important;
margin:0 0;
outline:none;
padding:15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
.outputTAstyle:focus , .outputTAstyle2:focus{
/*box-shadow: 0px 0px 2px 0px #ffffff;
border-color:white;*/
cursor:default!important;
/*color:#061420!important;*/
/*border:1px solid white;*/
color:#061420!important;
font-weight: 400;
/*border-color: #2D89DF;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*font-weight: 500;*/
/*border-color: #2D89DF;*/
/*box-shadow: 0px 0px 10px 0px white;*/
}
/* .outputTAstyle2[readonly]
{
background-color:rgb(229, 243, 255) !important;
}*/
::placeholder{
color:rgba(38, 117, 191, 0.65);
font-size:15px;
}
::-webkit-scrollbar {
display: none;
}
/*
.footer
{
color:#0D2740 !important;
font-weight: 600;
}*/ <!-- Programmed by Christine Jane Kudera ¯_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
<title>Image Path Generator</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW 0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
</head>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded:amp;nbsp;<span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div> <!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong>amp;nbsp;| e.g. |</strong> images/newImg/2020/08/</small>
</div> <!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path Image Filename(s) here..." readonly></textarea>
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
</body>
</html> Ответ №1:
Один из способов решить эту проблему — объявить переменную глобально, чтобы ее можно было использовать во всем коде.В приведенном ниже коде я объявил две переменные глобально, т.е. original_datas amp; original_filenames для хранения значений пути к файлу и имени файла.
Всякий раз, когда пользователь загружает файл, мы можем присвоить значение, outputData которое содержит весь список файлов, этим глобальным переменным, и если значение в поле ввода равно null, мы можем использовать эти глобальные переменные для присвоения value текстовой области. То же самое вы можете сделать для другого поля ввода для поиска имени файла.
Демонстрационный код :
$('#searchDir').keyup(function() {
var lines1;
var val = $(this).val();
lines1 = $('#outputText').val();
lines1 = lines1.split(/n/);
var originalDirect = [];
//check if value is not null
if ((val != null) amp;amp; (val != '')) {
for (var o = 0; o < lines1.length; o ) {
originalDirect.push((lines1[o]));
}
var searchDirect = [];
for (var a = 0; a < lines1.length; a ) {
var text = lines1[a];
if (text.indexOf(val) != -1) {
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('n'));
} else if (val == '') {
console.log("value is null")
$('#outputText').val(original_datas);//add value to textarea
}
});
//declare this globally
var original_datas; //for path image search
var original_filenames;//for file search
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i ) {
outputData.push((addtext input.files[i].name));
fileNames.push((input.files[i].name));
countSrc ;
}
if (!ul.hasChildNodes()) {
}
//assign values to use later
original_datas = outputData.join('n');
original_filenames = fileNames.join('n');
$('#outputText').val(outputData.join('n'));
$('#filenameText').val(fileNames.join('n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor) {
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
if (input.files.length == 0) {
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else if (input.files.length == 1) {
$('#labelUpload').html(input.files.length " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else {
$('#labelUpload').html(input.files.length " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
} body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #20629F!important;
background-color: rgba(204, 230, 255, 0.76) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
h4 {
/* color:#061420!important;*/
/* color:white!important;*/
color: #093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav {
position: fixed;
z-index: 6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle {
position: absolute;
z-index: -1;
right: -0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width: 50%;
}
#howToContainer .howToTitle span {
display: inline-block;
vertical-align: middle;
float: right;
color: #2675BF;
}
#howToContainer .howToTitle span img {
width: 40px;
height: 40px;
margin-left: 1em;
background-color: #2675BF;
border-radius: 0px 10px 10px 0;
}
#howToContainer:hover .howToTitle {
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span {
color: white;
font-weight: bold;
}
#howToContainer .howToText {
border: 1px solid rgba(51, 156, 255);
border-radius: 10px;
background-color: white;
width: 600px;
padding: 1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li {
font-size: 14px;
color: #20629F!important;
}
#howToContainer:hover .howToText {
color: #061420!important;
font-weight: 400;
border: 1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput {
text-indent: 8px;
font-size: 14px !important;
/* color:#0C253C!important;*/
color: #20629F!important;
font-weight: 400;
height: 100%;
}
.directoryInput::placeholder {
font-style: italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus {
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border: none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder {
color: rgba(38, 117, 191, 0.65);
font-size: 13px;
}
.fa-search {
color: #2D89DF;
position: absolute;
float: right;
right: 1em;
top: 0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1,
.copy-btn2 {
border: 1px solid rgb(38, 117, 191);
padding: 7px 30px;
margin-right: 6px;
border-radius: 7px 7px 0px 0px;
border-bottom: none;
transform: translate3d(0, 28px, -1px);
color: #2D89DF !important;
transition: all .3s;
z-index: -1;
}
.copy-btn-show {
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border: 1px solid #2D89DF;
border-bottom: none;
/*background-color:#2D89DF;*/
color: #2D89DF !important;
z-index: -1;
cursor: pointer;
user-select: none;
font-weight: 800;
}
.copy-btn-show:hover {
background-color: #2D89DF;
color: white !important;
}
/*END OF Copy Button*/
#genButton {
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color: #2D89DF;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color: white!important;
font-weight: bold;
font-size: 15px;
}
#genButton:hover {
/* border: 1px solid rgb(19, 59, 96);*/
background-color: rgb(19, 59, 96);
color: white!important;
}
.inputTA {
display: inline-block;
margin: 3px 20px 0 20px;
}
.inputTA2 {
display: inline-block;
margin: 3px 20px 0 20px;
}
.outputTAstyle,
.outputTAstyle2 {
border: 1px solid rgba(51, 156, 255);
border-radius: 5px;
width: 800px;
height: 500px;
font-size: 13px !important;
color: #0C253C!important;
margin: 0 0;
outline: none;
padding: 15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW 0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded:amp;nbsp;<span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div>
<!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/" />
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong>amp;nbsp;| e.g. |</strong> images/newImg/2020/08/</small>
</div>
<!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path Image Filename(s) here..." readonly></textarea>
<!--<div class="outputTAstyle" id="outputText" contenteditable="true" spellcheck="false" autocomplete="off" placeholder="New Path Image Filename(s) here..." readonly></div>-->
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center> Комментарии:
1. Спасибо за ответ. Я уже получил это после многих попыток, но я думаю, что мой был более сложным. Мне больше нравится ваш. Это аккуратно и просто.
Ответ №2:
Мой ответ таков: вам нужно сохранить исходные имена, чтобы сравнить старые и новые имена. Похоже, что ваша функциональность находится на правильном пути, но где-то внедрите, прежде чем сохранять имя файла, чтобы также сохранить в другой области старое имя. Имеет смысл?
Комментарии:
1. да. Я тоже об этом думал, но я вроде как новичок в jquery и не знаю, как и где это реализовать. 🙁
Ответ №3:
Я, наконец, знаю, как это реализовать после многих попыток, но я думаю, что я сделал это более сложным, чем это должно быть.
Как и в предыдущих ответах, я попытался сохранить исходные значения 2 текстовых областей в 2 массивах и объявить их глобально, чтобы я мог вызывать их снова каждый раз, когда пользователь не вводит в строке поиска.
Это работает каждый раз, когда пользователь нажимает на кнопку Сгенерировать. Исходные значения будут храниться в массивах при каждом нажатии на них. Я также позаботился о том, чтобы объявлять массивы равными 0 (нулю) при каждом нажатии кнопки Генерировать, чтобы предыдущие значения исчезали и вместо них сохранялись новые значения.
Я также добавил те же функции во 2-й текстовый раздел, только названия файлов.
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4 CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Store the Original Values of the 2 Text Areas
var originalDirect = [];
var originalFile = [];
var origNum1 = 0;
var origNum2 = 0;
//Save the Original Values of the 2 Text Areas everytime the Generate Button is clicked
$('#genButton').click(function()
{
originalDirect.length = 0;
originalFile.length = 0;
origNum1 = 0;
origNum2 = 0;
var lines0 = $('#outputText').val();
var lines0b = $('#filenameText').val();
lines0 = lines0.split(/n/);
lines0b = lines0b.split(/n/);
for(var o=0; o < lines0.length; o )
{
originalDirect.push((lines0[o]));
origNum1 ;
}
for(var p=0; p < lines0b.length; p )
{
originalFile.push((lines0b[p]));
origNum2 ;
}
});
//SEARCH BAR FUNCTION in PATH FILENAME TEXTAREA
$('#searchDir').keyup(function()
{
var val = $(this).val();
var lines1 = $('#outputText').val();
lines1 = lines1.split(/n/);
var countDir = 0;
if(val != '')
{
var searchDirect = [];
for (var a=0; a < lines1.length; a )
{
var text = lines1[a];
if(text.indexOf(val) != -1)
{
searchDirect.push((lines1[a]));
countDir ;
}
}
$('#outputText').val(searchDirect.join('n'));
$('.numbSrc1').html(countDir);
}
else
{
$('#outputText').val(originalDirect.join('n'));
$('.numbSrc1').html(origNum1);
}
});
//SEARCH BAR FUNCTION in FILENAME ONLY TEXTAREA
$('#searchFil').keyup(function()
{
var val2 = $(this).val();
var lines1b = $('#filenameText').val();
lines1b = lines1b.split(/n/);
var countDir2 = 0;
if(val2 != '')
{
var searchDirect2 = [];
for (var a=0; a < lines1b.length; a )
{
var text2 = lines1b[a];
if(text2.indexOf(val2) != -1)
{
searchDirect2.push((lines1b[a]));
countDir2 ;
}
}
$('#filenameText').val(searchDirect2.join('n'));
$('.numbSrc2').html(countDir2);
}
else
{
$('#filenameText').val(originalFile.join('n'));
$('.numbSrc2').html(origNum2);
}
});
$('.output1').hover(function(){
$('.copy-btn1').addClass('copy-btn-show');
}, function(){
$('.copy-btn1').removeClass('copy-btn-show');
});
$('.output2').hover(function(){
$('.copy-btn2').addClass('copy-btn-show');
}, function(){
$('.copy-btn2').removeClass('copy-btn-show');
});
$('.copy-btn1').click(function()
{
$('.copy-btn1').attr('data-content', 'Copied to clipboard!')
$('.copy-btn1').popover('show');
var copyText = $('#outputText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
});
$('.copy-btn2').click(function()
{
$('.copy-btn2').attr('data-content', 'Copied to clipboard!')
$('.copy-btn2').popover('show');
var copyText = $('#filenameText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
});
});
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i ) {
// var p = document.createElement("p");
// p.innerHTML = addtext input.files[i].name;
outputData.push((addtext input.files[i].name));
fileNames.push((input.files[i].name));
countSrc ;
// ul.appendChild(p);
}
if(!ul.hasChildNodes()) {
// var p = document.createElement("p");
// p.innerHTML = 'No Files Selected';
// ul.appendChild(p);
}
$('#outputText').val(outputData.join('n'));
$('#filenameText').val(fileNames.join('n'));
$('.numbSrc1').html(countSrc);
$('.numbSrc2').html(countSrc);
}
function countImages(changeBGColor)
{
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
// $('#countImg').html(input.files.length " Images");
if (input.files.length == 0)
{
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else if (input.files.length == 1)
{
$('#labelUpload').html(input.files.length " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else
{
$('#labelUpload').html(input.files.length " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
</script> body
{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:#20629F!important;
background-color:rgba(204, 230, 255, 0.76) !important;
/* color:#20629F!important;*/
/* color:white!important;*/
/* background-color:rgb(204, 230, 255, 0.07) !important;*/
/* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}
h1, h2, h3, h4, h5, h6
{
font-weight: 600;
}
h4
{
/* color:#061420!important;*/
/* color:white!important;*/
color:#093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav
{
position: fixed;
z-index:6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle
{
position: absolute;
z-index:-1;
right:-0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width:50%;
}
#howToContainer .howToTitle span
{
display: inline-block;
vertical-align: middle;
float:right;
color:#2675BF;
}
#howToContainer .howToTitle span img
{
width:40px;
height:40px;
margin-left:1em;
background-color:#2675BF;
border-radius:0px 10px 10px 0;
}
#howToContainer:hover .howToTitle{
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span
{
color:white;
font-weight: bold;
}
#howToContainer .howToText
{
border: 1px solid rgba(51, 156, 255);
border-radius:10px;
background-color: white;
width:600px;
padding:1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li
{
font-size: 14px;
color:#20629F!important;
}
#howToContainer:hover .howToText
{
color:#061420!important;
font-weight: 400;
border:1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput
{
text-indent:8px;
font-size:14px !important;
/* color:#0C253C!important;*/
color:#20629F!important;
font-weight: 400;
height:100%;
}
.directoryInput::placeholder
{
font-style:italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus
{
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border:none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder
{
color:rgba(38, 117, 191, 0.65);
font-size:13px;
}
.fa-search
{
color:#2D89DF;
position: absolute;
float:right;
right:1em;
top:0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1, .copy-btn2
{
border:1px solid rgb(38, 117, 191);
padding:7px 30px;
margin-right:6px;
border-radius:7px 7px 0px 0px;
border-bottom:none;
transform: translate3d(0, 28px, -1px);
color:#2D89DF !important;
transition:all .3s;
z-index: -1;
}
.copy-btn-show{
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border:1px solid #2D89DF;
border-bottom:none;
/*background-color:#2D89DF;*/
color:#2D89DF !important;
z-index: -1;
cursor:pointer;
user-select: none;
font-weight:800;
}
.copy-btn-show:hover
{
background-color:#2D89DF;
color:white !important;
}
/*END OF Copy Button*/
#genButton
{
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color:#2D89DF;
padding:0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color:white!important;
font-weight: bold;
font-size:15px;
}
#genButton:hover
{
/* border: 1px solid rgb(19, 59, 96);*/
background-color:rgb(19, 59, 96);
color:white!important;
}
.inputTA
{
display:inline-block;
margin:3px 20px 0 20px;
}
.inputTA2
{
display:inline-block;
margin:3px 20px 0 20px;
}
.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
border-radius:5px;
width:800px;
height:500px;
font-size:13px !important;
color:#0C253C!important;
margin:0 0;
outline:none;
padding:15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
.outputTAstyle:focus , .outputTAstyle2:focus{
/*box-shadow: 0px 0px 2px 0px #ffffff;
border-color:white;*/
cursor:default!important;
/*color:#061420!important;*/
/*border:1px solid white;*/
color:#061420!important;
font-weight: 400;
/*border-color: #2D89DF;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*font-weight: 500;*/
/*border-color: #2D89DF;*/
/*box-shadow: 0px 0px 10px 0px white;*/
}
/* .outputTAstyle2[readonly]
{
background-color:rgb(229, 243, 255) !important;
}*/
::placeholder{
color:rgba(38, 117, 191, 0.65);
font-size:15px;
}
::-webkit-scrollbar {
display: none;
}
/*
.footer
{
color:#0D2740 !important;
font-weight: 600;
}*/ <!-- Programmed by Christine Jane Kudera ¯_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
<title>Image Path Generator</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW 0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
</head>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded:amp;nbsp;<span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div> <!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong>amp;nbsp;| e.g. |</strong> images/newImg/2020/08/</small>
</div> <!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc1">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path Image Filename(s) here..." readonly></textarea>
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong>amp;nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc2">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchFil" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
</body>
</html>