In contact form 7 when attach any file to upload there is no option to remove the attached file. How do I add a remove button or cross button beside file name?
<input type="file" name="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<input type="file" name="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
You can use below concept with remove the attached input file
$.fn.fileUploader = function (filesToUpload) {
this.closest(".files").change(function (evt) {
for (var i = 0; i < evt.target.files.length; i++) {
filesToUpload.push(evt.target.files[i]);
};
var output = [];
for (var i = 0, f; f = evt.target.files[i]; i++) {
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";
output.push("<li><strong>", escape(f.name), "</strong> - ",
f.size, " bytes. ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
var filesToUpload = [];
$(document).on("click",".removeFile", function(e){
e.preventDefault();
var fileName = $(this).parent().children("strong").text();
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for(i = 0; i < filesToUpload.length; ++ i){
if(filesToUpload[i].name == fileName){
//console.log("match at: " + i);
// remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
}
}
//console.log(filesToUpload);
// remove the <li> element of the removed file from the page DOM
$(this).closest('div.files').find('input[type="file"]').val('')
$(this).parent().remove();
//document.getElementById("uploadCaptureInputFile").value = "";
});
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});
body {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files1" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row files" id="files2">
<h2>Files 2</h2>
<span class="btn btn-default btn-file">
Browse <input type="file" name="files2" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
</form>
</div>
Related
Goal : After selecting "choose file" button i want to show the name of the files(f1.txt and f2.txt). After that i want to be able to click on the button again and list those along with previous ones(f1.txt, f2.txt, f3.txt and f4.txt). After this on clicking "upload files" i want to upload all 4 files.
I've tried hiding the previous buttons and all but without success on the other part. I came across this post which seemed helpful: List selected files from file input . I've been at it for a week and decided to post this.
Below is the code for your reference.
P.S. I am a newbie in this field so please elaborate your answer.(Sorry for the mess)
function restrictTypeAndSize(obj) {
var s = true;
for (var i = 0; i < obj.files.length; i++) {
s = writefiles(obj.files[i]);
}
}
function writefiles(file) {
if (file.type.indexOf("image") == -1 && file.type.indexOf("pdf") == -1) {
alert("Invalid Type!");
$("#fileAttachment").attr("src", "blank");
document.getElementById("fileAttachment").value = "";
return false;
}
if (file.size > 10485760) {
alert("Individual Image size should not be greater than 10 Mb!");
$("#fileAttachment").attr("src", "blank");
document.getElementById("fileAttachment").value = "";
return false;
}
var result = $('div#result');
if (window.FileReader && window.Blob) {
var file = file;
console.log('Loaded file: ' + file.name);
console.log('Blob mime: ' + file.type);
var reader = new FileReader();
reader.onloadend = function(e) {
var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
var header = '';
for (var i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
console.log('File header: ' + header);
// Check the file signature against known types
var type = 'unknown';
switch (header) {
case '89504e47':
type = 'image/png';
break;
case 'ffd8ffe0':
case 'ffd8ffe1':
case 'ffd8ffe2':
type = 'image/jpeg';
break;
case '25504446':
type = 'application/pdf';
break;
}
if (file.type !== type) {
alert("File extension doesn't match the image type !");
$("#fileAttachment").attr("src", "blank");
document.getElementById("fileAttachment").value = "";
console.log('Mime type detected: ' + type +
'. Does not match file extension.');
} else {
console.log('Mime type detected: ' + type +
'. Matches file extension.');
}
};
reader.readAsArrayBuffer(file);
} else {
result
.html('<span style="color: red; ">Your browser is not supported. Sorry.</span>');
console
.error('FileReader or Blob is not supported by the browser.');
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/yeti/bootstrap.min.css" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Servlet File Upload/Download</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div style="margin: 50px">
<!-- <h1 style="text-align:center;font-family: garamond, serif ">File Upload</h1> -->
<h2 style="text-align: center; color: black; font-family: courier">
Welcome!
</h2>
<br>
<form id="fileUploadForm" method="post" action="fileUploadServlet" enctype="multipart/form-data">
<div class="form_group">
<div class="form-group">
<label for="staticEmail" class="col-sm-0 col-form-label"><strong>User
Id :</strong></label>
<div class="col-sm-0">
<input type="text" readonly="" class="form-control-plaintext" id="staticId" name="staticId" value="" style="font-family: courier">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1"><b><strong>Full Name :</strong></b></label> <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Full Name" required style="font-family: courier">
</div>
<br>
<div class="form-group">
<label for="exampleTextarea"><b><strong>File
Description :</strong></b></label>
<textarea class="form-control" id="exampleTextarea" rows="3" style="font-family: courier" name="description"></textarea>
</div>
<label><i>Upload File</i></label><span id="colon">: </span><input id="fileAttachment" type="file" name="fileUpload" multiple="multiple" accept="image/jpeg, image/png, .pdf" onchange="restrictTypeAndSize(this)" /> <span id="fileUploadErr"><b><i><strong>Please Choose A File!</strong></i></b></span>
</div>
<button id="uploadBtn" type="submit" class="btn btn-primary" onclick="return showAlert()">Upload</button>
</form>
<br> <br>
<!-- List All Uploaded Files -->
<div class="panel">
<a id="allFiles" class="hyperLink" href="<%=request.getContextPath()%>/uploadedFilesServlet"><button
type="button" class="btn btn-outline-warning">List all
uploaded files</button></a>
</div>
<div class="panel">
<a id="fileUpload" class="hyperLink" href="<%=request.getContextPath()%>/index.jsp"><button
type="button" class="btn btn-danger" style="float: right">Logout</button></a>
</div>
</div>
</div>
</body>
</html>
From your post, it's not clear what you are trying to accomplish exactly. I understand the basics. It's just not clear what you have tried or what you want the User to do.
I started by cleaning up some of the code. Consider the following.
$(function() {
function restrictTypeAndSize(o, t, s) {
var r = [];
if (t == undefined) {
t = "image/jpeg";
}
if (s == undefined) {
s = 10485760;
}
$.each(o.files, function(i, f) {
if (t.indexOf(f.type) < 0) {
r.push($.extend({}, f, {
error: "Incorrect Type"
}));
} else if (f.size > s) {
r.push($.extend({}, f, {
error: "File Size"
}));
} else {
writeFiles(f);
r.push($.extend({}, f, {
error: false
}));
}
});
return r;
}
function writeFiles(file) {
var result = $('div#result');
if (window.FileReader && window.Blob) {
var file = file;
console.log('Loaded file: ' + file.name);
console.log('Blob mime: ' + file.type);
var reader = new FileReader();
reader.onloadend = function(e) {
var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
var header = '';
for (var i = 0; i < arr.length; i++) {
header += arr[i].toString(16);
}
console.log('File header: ' + header);
// Check the file signature against known types
var type = 'unknown';
switch (header) {
case '89504e47':
type = 'image/png';
break;
case 'ffd8ffe0':
case 'ffd8ffe1':
case 'ffd8ffe2':
type = 'image/jpeg';
break;
case '25504446':
type = 'application/pdf';
break;
}
if (file.type !== type) {
alert("File extension doesn't match the image type !");
$("#fileAttachment").attr("src", "blank");
$("#fileAttachment").val("");
console.log('Mime type detected: ' + type +
'. Does not match file extension.');
} else {
console.log('Mime type detected: ' + type +
'. Matches file extension.');
}
};
reader.readAsArrayBuffer(file);
} else {
result
.html('<span style="color: red; ">Your browser is not supported. Sorry.</span>');
console
.error('FileReader or Blob is not supported by the browser.');
}
}
$("#fileAttachment").change(function(e) {
var results = restrictTypeAndSize(this, $(this).attr("accept"));
console.log(results);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<div class="container">
<div style="margin: 50px">
<h2 style="text-align: center; color: black; font-family: courier">Welcome!</h2>
<br>
<form id="fileUploadForm" method="post" action="fileUploadServlet" enctype="multipart/form-data">
<div class="form_group">
<div class="form-group">
<label for="staticEmail" class="col-sm-0 col-form-label"><strong>User Id :</strong></label>
<div class="col-sm-0">
<input type="text" readonly="" class="form-control-plaintext" id="staticId" name="staticId" value="" style="font-family: courier">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1"><b><strong>Full Name :</strong></b></label> <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Full Name" required style="font-family: courier">
</div>
<br>
<div class="form-group">
<label for="exampleTextarea"><b><strong>File Description :</strong></b></label>
<textarea class="form-control" id="exampleTextarea" rows="3" style="font-family: courier" name="description"></textarea>
</div>
<label><i>Upload File</i></label><span id="colon">: </span><input id="fileAttachment" type="file" name="fileUpload" multiple="multiple" accept="image/jpeg, image/png, application/pdf" /> <span id="fileUploadErr"><b><i><strong>Please Choose A File!</strong></i></b></span>
</div>
<button id="uploadBtn" type="submit" class="btn btn-primary" onclick="return showAlert()">Upload</button>
</form>
<br> <br>
<div class="panel">
<a id="allFiles" class="hyperLink" href="<%=request.getContextPath()%>/uploadedFilesServlet"><button type="button" class="btn btn-outline-warning">List all uploaded files</button></a>
</div>
<div class="panel">
<a id="fileUpload" class="hyperLink" href="<%=request.getContextPath()%>/index.jsp"><button type="button" class="btn btn-danger" style="float: right">Logout</button></a>
</div>
</div>
</div>
Since you have multiple in your file input, the User can already add more than 1 file. It all seems to work yet I do not see where the selected files get stored locally so the User can then select more files. What should the User do at this point? How do they know what files they have selected already? What if they want to remove a file?
I am trying to create file upload using the Bootstrap 4 custom-file . In this process file name is not getting displayed in the Label after the file is uploaded. I have tried using Javascript to update the file name in label. However this did not work. Below is the code. Please help me how to fix this.
<div class="container-fluid">
<form enctype="multipart/form-data">
<div class="card">
<div class="card-header">
BERICHT DATEI IMPORTIEREN
</div>
<div class="card-body">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="blkUploadReport" name="blkUploadReport">
<label class="custom-file-label" for="blkUploadReport">Choose the File</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button class="btn btn-success btn-raised btn-sm" id="saveEdit" >
IMPORTIEREN <span class="glyphicon glyphicon-floppy-disk"></span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
$('.custom-file-input').on('change', function(){
console.log("I am inside upload event");
files = $(this)[0].files;
name = '';
for(var i = 0; i < files.length; i++)
{
name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : "");
}
$(".custom-file-label").html(name);
});
The jQuery selector isn't selecting the input element. Use the id attribute of the file input instead.
$('#blkUploadReport').on('change', function(){
console.log("I am inside upload event");
files = $(this)[0].files;
name = '';
for(var i = 0; i < files.length; i++)
{
name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : "");
}
$(".custom-file-label").html(name);
})
Demo: https://codeply.com/p/bJmnTUiqhS
Also see: Bootstrap 4 File Input
If there are multiple files, I recommend creating an array using push in javascript and then displaying them.
var name = []
for (var i = 0; i < files.length; i++) {
name.push(files[i].name) // Anything else you want to be displayed
}
document.getElementbyClassName('custom-file-label').innerHTML = name
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
I am creating a multi-page form (by which I mean on certain button clicks, specific elements change between hidden and visible) following this page's setup. I have 2 pages: 1. add animal and 2. add another animal. I would like to be able to repeat page 2 as many times as the user clicks the button add another animal before they click submit, and store all the inputted animal names to be sent to a python function (so every time a user types in a name on the add another animal page, the previous animal's name isn't overwritten.
My HTML, CSS, and JS are below.
<div class="section-25">
<div class="container-5 w-container">
<div class="text-block-6">Select the level of algorithm you're looking to make</div>
<div class="w-form">
<form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal">
<!-- PAGE 1 -->
<div id="page1" class="page">
<!-- 1ST ANIMAL NAME -->
<label for="Enter-species" class="custom-question enter-species" id="one_name">What animal are you interested in?</label>
<input type="text" class="text-field w-input" maxlength="256" name="species" placeholder="Enter name of animal" id="Enter-species" required="">
<p><input type="button" id="C1" value="Add another animal" onClick="showLayer('page2')"></p>
</div>
<!-- PAGE 2 -->
<div id="page2" class="page">
<!-- NEXT ANIMAL NAME -->
<label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label>
<input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species">
<p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="C2" value="Add another animal" onClick="showLayer('page2')">
<input type="button" id="S1" value="Submit" action="/add_animal" </p>
</div>
</form>
</div>
</div>
</div>
CSS:
<!-- CSS -->
<style>
.page {
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
JS:
<!-- JAVASCRIPT -->
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for (i = 0; i < len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
i think you mean something like this:
let currentLayer = 0;
const animalList = [];
const form = document.getElementById("wf-form-Email-Form");
const [field, backButton, addButton, submitButton] = form.elements;
function showLayer(lyr) {
switch(lyr){
case 1:
currentLayer++;
if (currentLayer-1 == animalList.length){
animalList.push(field.value)
form.reset();
backButton.style.display = 'unset';
}else{
if (currentLayer == animalList.length){
addButton.value = 'Add another animal';
field.value = "";
}else{
addButton.value = 'Next';
field.value = animalList[currentLayer];
}
}
break;
case -1:
currentLayer--;
if(!currentLayer) backButton.disabled = true;
if (currentLayer < animalList.length +1){
field.value = animalList[currentLayer];
addButton.value = 'Next';}
break;
}
}
submitButton.onClick = function(e){
// serialize animalList and send using AJAX or add a hidden type input and set animalList as it's value
}
.page {
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
#backButton{
display:none;
}
<div class="section-25">
<div class="container-5 w-container">
<div class="text-block-6">Select the level of algorithm you're looking to make</div>
<div class="w-form">
<form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal">
<label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label>
<input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species">
<p>
<input type="button" id="backButton" value="Go Back" onClick="showLayer(-1)">
<input type="button" id="addButton" value="Add another animal" onClick="showLayer(+1)">
<input type="button" id="submit" value="Submit">
</p>
</form>
</div>
</div>
</div>
Please Don't make it duplicate i have a code please refer that and let me where i'm doing wrong Hello guys i have program which deals with the multi select list where I have implemented such functionality where user can Add or Remove item from left side list to right side list ("<" and ">").This Totally works fine Again i have added a Table which contains the right side (selected list values) for this code is :
HTML: In this "sourceHeaderFields" contains the list where we are selecting list adding to the "sourceHeaderFields"
<h2><strong>Select features from Seed data:</strong> </h2>
<select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple"
style="width:210Px;height:150px;margin-left: 100px;">
</select>
<select id="sourceHeaderFields" name="targetHeaderFields" multiple="multiple"
style="width:210Px; height:150px">
</select>
<br>
<input type="button" id="leftall" value="<<" style="margin-left: 250px;"/>
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<br></br>
<h2> <strong> Default Values for the Selected Headers: </strong> </h2>
<table id="defaultValuesTable">
</table>
JS
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
$('#left').click(function () {
selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
//console.log(selectedValue1);
moveItems('#targetHeaderFields', '#sourceHeaderFields');
$("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
});
$('#right').on('click', function () {
selectedValue = $('#sourceHeaderFields').find(':selected').val()
console.log(selectedValue);
moveItems('#sourceHeaderFields', '#targetHeaderFields');
debugger;
//Populate the table with the field
$("#defaultValuesTable").append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
});
Multilist works fine but problem is this line:for table list****Please go this for live code working: https://jsfiddle.net/8jbp47zq/ not sure how to paste a csv file to get the list
$("#defaultValuesTable").remove().append("<tr id='"+selectedValue+"'><td>"
+selectedValue+"</td><td><input type='text'></tr>");
Here when i'm adding anything its adding a text bar for the table with accoresponding list name but when i'm removing its not removing one by one at once its remove all...i want to remove the table list one by one not at once for that i have tried many way:
//$("#defaultValuesTable").remove(id="+selectedValue1+");
and
//$("#defaultValuesTable").children("tr").remove();
and
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");
none of these worked please help..If you guys need more info please tell me ill give...I have added a pic of web UI please refer that...thnx
There was an issue with the remove process. I've updated the code.
//A drop-down list
$(document).ready(function() {
for (var i = 1970; i <= 2018; i++) {
var fromYearSelect = document.getElementById("fromYear");
var toYearSelect = document.getElementById("toYear");
var option = document.createElement("OPTION");
fromYearSelect.options.add(option);
option.text = i;
option.value = i;
var option2 = document.createElement("OPTION");
toYearSelect.options.add(option2);
option2.text = i;
option2.value = i;
}
});
$(function() {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function() {
debugger;
selectedValue1 = $('#targetHeaderFields').remove(':selected').val()
//console.log(selectedValue1);
moveItems('#targetHeaderFields', '#sourceHeaderFields');
debugger; // fixed below line.
$('#'+selectedValue1, "#defaultValuesTable").remove();
//$("#defaultValuesTable").children("tr").remove();
//$("#defaultValuesTable").remove().append(id="+selectedValue1+");
// $("#defaultValuesTable").remove().append("<tr id='" + selectedValue + "'><td>" +
// selectedValue + "</td><td><input type='text'></tr>");
});
$('#right').on('click', function() {
selectedValue = $('#sourceHeaderFields').find(':selected').val()
console.log(selectedValue);
moveItems('#sourceHeaderFields', '#targetHeaderFields');
debugger;
//Populate the table with the field
$("#defaultValuesTable").append("<tr id='" + selectedValue + "'><td>" +
selectedValue + "</td><td><input type='text'></tr>");
});
$('#leftall').on('click', function() {
moveAllItems('#targetHeaderFields', '#sourceHeaderFields');
});
$('#rightall').on('click', function() {
moveAllItems('#sourceHeaderFields', '#targetHeaderFields');
});
$('#populateHeaderFields').on('click', function() {
alert("Inside populate list");
var files = ('#source_fileName').files;
alert("Files Count - " + files);
});
$('#upload-form').on('change', function(evt) {
//alert('File content changed');
debugger;
var filesCount = evt.target.files.length;
for (i = 0; i < filesCount; i++) {
var file = evt.target.files[i];
if (file) {
var reader = new FileReader();
/*
reader.onload = function(e) {
var contents = e.target.result;
var ct = reader.result;
var words = ct.split(' ');
}
reader.readAsText(file);
*/
// Read our file to an ArrayBuffer
reader.readAsArrayBuffer(file);
// Handler for onloadend event. Triggered each time the reading operation is completed (success or failure)
reader.onloadend = function(evt) {
// Get the Array Buffer
var data = evt.target.result;
// Grab our byte length
var byteLength = data.byteLength;
// Convert to conventional array, so we can iterate though it
var ui8a = new Uint8Array(data, 0);
// Used to store each character that makes up CSV header
var headerString = '';
// Iterate through each character in our Array
for (var i = 0; i < byteLength; i++) {
// Get the character for the current iteration
var char = String.fromCharCode(ui8a[i]);
// Check if the char is a new line
if (char.match(/[^\r\n]+/g) !== null) {
// Not a new line so lets append it to our header string and keep processing
headerString += char;
} else {
// We found a new line character, stop processing
break;
}
}
//Iterate through the list and populate the select element..
$.each(headerString.split(","), function(i, e) {
$("#sourceHeaderFields").append($("<option>", {
text: e,
value: e
}));
});
// if len(headerString)!= 1{
// alert("headerString Donot match");
// }else{
console.log(headerString);
console.log("Next Read");
};
} else {
alert("Failed to load file");
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> upload </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://bootswatch.com/4/solar/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="mx-auto" style="width:500px;">
<h1>Large Data Generation</h1>
</div>
</div>
<form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
<div id="file-selector">
<p>
<strong>Source File: </strong>
<input id="source_fileName" type="file" name="source_fileName" accept="csv/*" multiple style="
margin-left: 10px;" />
</p>
</div>
<br>
<strong>Location Type:</strong>
<input type="radio" name="target" value="BrowserDownload" checked>Browse Local
<input type="radio" name="target" value="dumpToS3"> S3 Remote
<br> </br>
<h2><strong>Select features from Seed data:</strong> </h2>
<select id="sourceHeaderFields" name="sourceHeaderFields" multiple="multiple" style="width:210Px;height:150px;margin-left: 100px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="targetHeaderFields" name="targetHeaderFields" multiple="multiple" style="width:210Px; height:150px">
</select>
<br>
<input type="button" id="leftall" value="<<" style="margin-left: 250px;" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<br />
<br></br>
<h2><strong>Default Values for the Selected Headers:</strong></h2>
<table id="defaultValuesTable">
</table>
<br>
<div>
<br>
</div>
<div id="div_records">
<strong>Record Count: </strong>
<input id="records" type="text" name="records" value="1000" style="margin-left: 5px;">
<br> <br> <br>
<strong>From Year: </strong>
<select id="fromYear" name="fromYear" style="margin-left: 30px;"></select>
<strong style="margin-left:20px">To Year: </strong>
<select id="toYear" name="toYear" style="margin-left: 5px;"></select>
<br></br>
</div>
<br></br>
<input type="submit" value="Generate Data" id="upload-button">
</form>
</div>
</body>
Remove multiple/all rows one by one from a table with delay use below code.
var i=0;
$('#defaultValuesTable tr').each(function() {
var dly=200;
$(this).delay(i*dly).queue(function(){
$(this).remove();
});
i++;
});
Change value of dly to increase/decrease delay
I have this code:
<input type="file" onchange="showUrl(this.value)" name="upload[]" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload"><br><br><span id="url"></span>
and this javascript function
function showUrl(url) {
document.getElementById("url").innerHTML = url;
}
I want to show the url of every file that the user selects with "input file" button. The function shows only the url of the first file. Someone can help me?
Thanks
First, change your input to:
<input type="file" onchange="showUrl(this)" name="upload[]" multiple="multiple">
Then, change your JS to:
function showUrl(url) {
for(var i = 0; i < url.files.length; i++) {
document.getElementById("url").innerHTML += url.files[i].name;
}
}
That way you will be able to read all files selected on the files input.
Javascript
<script type="text/javascript">
function showUrl() {
var allFiles = document.getElementById("myFiles");
if ('files' in allFiles) {
if (allFiles.files.length > 0) {
for (var i = 0; i < allFiles.files.length; i++) {
document.getElementById("url").innerHTML += "<br />"+allFiles.files[i].name;
// note you can mess with proprieties here, like 'size'
}
}
}
}
</script>
HTML
<body>
<input type="file" onchange="showUrl()" name="upload[]" id="myFiles" multiple="multiple">
<button type="button" class="btn btn-success"><i class="icon icon-plus"></i> Add file</button></span>
<input type="submit" class="btn btn-primary" value="Upload">
<br /><br />
<span id="url"></span>
</body>
I don't think you can get the full path, but you can get the file's name by passing this.files instead of this.value
function showUrl(url) {
for(var i = 0; i < url.length; i++)
{
document.getElementById("url").innerHTML += url[i].name + "<br>";
}
}
I'm not sure of what you're after. try:
function showUrl(url) {
document.getElementById("url").innerHTML += url;
}