I have a txt file which get read with javascript.
function handleTextFile(evt)
{
var files = evt.target.files;
var reader = new FileReader();
reader.onload = function(){
Text = reader.result.toLowerCase();
};
reader.readAsText(files[0]);
}
I want find in var >Text< all Dates.
The located date shall be saved in a variable. The only thing i know-> i can match date formats with code
var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
but i want not only a true or false output. I want the Value of this located date.
Anyone has a link or a some code for me?
Here is a working snipped with regex for dates in format 00-00-0000.
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var myRegexp = /\b(\d{2}-\d{2}-\d{4})/g;
var match = myRegexp.exec(reader.result);
fileDisplayArea.innerText = match;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
<div id="page-wrapper">
<h1>Your date reader.</h1>
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
</div>
I used this tutorial to assemble snipped above .
Related
I'm developing a website to recommend clothes. So, I want customers to put their image which is in their local.
First, I tried <input type='file' accept='image/*' ~~>. But it doesn't provide customizing option. I must show the button with my picture.
Therefore I tried button option and write the code like this.
function openImageFile() {
var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.click();
input.onchange = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var dataurl = reader.result;
var output = document.getElementById('output');
output.src = dataURL;
output.width = 125;
output.height = 125;
};
photo = input.files[0];
reader.readAsDataURL(input.files[0]);
}
}
<button type="button" id="test" onclick="openImageFile()"><img src="blah.png"></button>
<img id='output'>`
Convert your image to data protocol.
Converter: https://base64.guru/converter/encode/image
Set the src of your image element to:
<image src="data:image/png;base64,OUPUT_FROM_ENCODER" />
This allows your website to load a image without it being hosted by a URL
I am tasked with a little coding challenge that I can't seem to work out. Its meant to be done in javascript, a language I have touched in years... Basically the task is to read a local file , which has sentences on each line. Some of the sentences are palindromes- and the goal is to output only the sentences that are palindromes. I have tried playing around in JSFiddle with the following code. But, my functionality isn't working.
HTML:
<input type="file" name="file" id="file">
Javascript:
window.addEventListener('load', function() {
document.getElementById("myBtn").addEventListener("click", function() {
var reader = new FileReader();
reader.addEventListener('load', function() {
document.getElementById('file').innerText = this.result;
});
reader.readAsText(document.querySelector('input').files[0]);
});
}, true);
console.log(reader);
I found some code online for checking palindromes, but its for a user inputted sentence. I'm struggling to comprehend how to utilize this logic to apply to the lines from my inputted file.
function palindrome(str) {
var re = /[\W_]/g;
var lowRegStr = str.toLowerCase().replace(re, '');
var reverseStr = lowRegStr.split('').reverse().join('');
return reverseStr === lowRegStr;
}
palindrome("A man, a plan, a canal. Panama");
Any ideas or advice? Thanks!
This is a quick solution for the boilerplate code that you got:
Sample file contents:
A man, a plan, a canal. Panama
something else
another line
window.addEventListener('load', function() {
document.getElementById("myBtn").addEventListener("click", function() {
var reader = new FileReader();
reader.addEventListener('load', function() {
//document.getElementById('file').innerText = this.result;
const strings = this.result.split(/\r?\n/);
const palindromes = strings.filter((line) => {
return palindrome(line);
});
console.log('initial lines:', strings);
console.log('palindromes only:', palindromes);
});
reader.readAsText(document.querySelector('input').files[0]);
});
}, true);
//console.log(reader);
function palindrome(str) {
if (str === '') return false;
var re = /[\W_]/g;
var lowRegStr = str.toLowerCase().replace(re, '');
var reverseStr = lowRegStr.split('').reverse().join('');
return reverseStr === lowRegStr;
}
<input type="file" name="file" id="file">
<button id="myBtn">Start</button>
I have an ASP.NET MVC Application where I can choose a .log File. This happens with a FileReader. But when the explorer opens, all kind of datas are displayed (.png, .jpg, .docx....). So I want, that only the .log Files are displayed.
Here is my code:
// Input File (BUTTON)
const input = document.querySelector('input[type="file"]');
//Get data input from user
input.addEventListener('change', function (e) {
$('#fileName').html(input.files[0].name);
const reader = new FileReader()
reader.onload = function () {
const reslt = reader.result;
readFile(reslt);
}
reader.readAsText(input.files[0])
document.getElementById('rankings').style.display = 'none';
}, false)
This question relates more to html than to javascript. You should use the accept attribute and list a comma separated extensions accepted.
In your case:
<input type="file" accept=".log" />
Try this code.
//Get data input from user
input.addEventListener('change', function (e) {
let kind = $('#fileName').html(input.files[0].name);
if(kind != undefined && kind.indexOf('.log') > 0) {
const reader = new FileReader()
reader.onload = function () {
const reslt = reader.result;
readFile(reslt);
}
reader.readAsText(input.files[0])
document.getElementById('rankings').style.display = 'none';
}
}, false)
Hop is save you day.
Here i am converting two images for base64 ,this one working fine after that i want make one json format, so i am trying like this but i no able to get answer. i am getting error like "message": "Uncaught ReferenceError: floor_image is not defined", how to solve this issue and send json format
$(document).ready(function(){
$('#submit').click(function(){
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var floor_image = fileLoadedEvent.target.result; // <--- data: base64
console.log("Converted Base64 version 1 " + floor_image); // i am getting answer here
}
fileReader.readAsDataURL(fileToLoad);
}
var filesSelected = document.getElementById("inputFileToLoad1").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var property_image = fileLoadedEvent.target.result; // <--- data: base64
//console.log("Converted Base64 version 2 " + property_image); // i am getting answer here
}
fileReader.readAsDataURL(fileToLoad);
}
var json = {
"FloorImage" :floor_image,
"PropertyImage" : property_image
}
console.log(json);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="idname">
<input id="inputFileToLoad" type="file" /><br><br>
<input id="inputFileToLoad1" type="file" />
<br><br><br><br>
<input type="button" value="Submit" id="submit">
</form>
You do not have the floor_image in the global scope. Try to write var floor_image; outside of the method, then set floor_image to your result as you do, but remove the var keyword in the method. The same goes for property_image and json
Like this:
$(document).ready(function(){
var json={FloorImage:"not loaded yet",PropertyImage:"not loaded yet"};
var floor_image;
var property_image;
$('#submit').click(function(){
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
floor_image = fileLoadedEvent.target.result;
json.FloorImage=floor_image;
}
fileReader.readAsDataURL(fileToLoad);
}
var filesSelected = document.getElementById("inputFileToLoad1").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
property_image = fileLoadedEvent.target.result;
json.PropertyImage=property_image;
}
fileReader.readAsDataURL(fileToLoad);
}
console.log(json); // you are logging the json before the images are loaded, because this code is executed before the code inside onLoad.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="idname">
<input id="inputFileToLoad" type="file" /><br><br>
<input id="inputFileToLoad1" type="file" />
<br><br><br><br>
<input type="button" value="Submit" id="submit">
</form>
Scenario
Try to load the FloorImage first, you will see the text: "not loaded yet" in both properties of the json-object. Then try to load the PropertyImage, and you will se the base64 of the FloorImage inside your json-object, but the text "not loaded yet" on the PropertyImage. This is because the images are not finished loading when you print the json-object. However the images are there after the onload-method is done.
There are 2 problems:
floor_image and property_image are in local scope. You should
move them to click function's scope
onload is just a callback. It means that json object may
be created before files have loaded. You should only create it after
2 onload functions called (for example, use flag to determine
onload called or not, and only create json when both of them are
true)
We are working on a Email Encrypted Service. Here I have designed a html page (User Registration) where I have provided an area for uploading a file with extentions .crt, .cer and .der
This is HTML Content:
<section>
<label class="label">PubLic Key File</label>
<div>
<input type="file" id="fileInput">
</div>
<div id="fileDisplayArea"></div>
</section>
<button type="submit" class="button">Submit</button>
Javascript Code is:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
fileDisplayArea.appendChild(img);
}
reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!";
}
});
}
I have copied this Javascript Code (beginner in javascript) . It Only Accepts image file. I want to change this code which only accepts .crt, .cer and .der Extentions.
Thank you :)
Your current regex will actually match any filename that contains the word "image" (any part of the filename that is "image" followed by zero or more characters)
If you want to match filenames that end in ".crt", ".cer" or ".der", you can use this regex:
var imageType = /\.crt|cer|der$/
You can test regular expressions using Rubular