I have a code for displaying whole document in a HTML
<!DOCTYPE HTML>
<html>
<head>
<script>
let openFile = function(event) {
let input = event.target;
let reader = new FileReader();
reader.onload = function(){
let text = reader.result;
let node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
</div>
</body>
</html>
I need to load a document then display only strings I need - names and url like:
Document example:
#NAME:Elis:
http://elis.com
#NAME:Emma:
http://emma.com
Display:
<a href=http://elis.com>Elis</a>
<a href=http://emma.com>Emma</a>
let openFile = function(event) {
let input = event.target;
let reader = new FileReader();
reader.onload = function() {
let text = reader.result;
let node = document.getElementById('output');
// node.innerText = text;
var resultText = "";
lines = reader.result.split(/\r\n|\r|\n/);
for (let i = 0; i < lines.length - 1; i += 2) {
var matches = lines[i].match(/\#NAME:([^:]+)/);
resultText += `${matches[1].trim()}\n`;
}
// innerText here only for demonstration purpose
// use innerHTML for working code instead
node.innerText = resultText;
// node.innerHTML = resultText
};
reader.readAsText(input.files[0]);
};
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
var str = `#NAME:Elis:
http://elis.com
#NAME:Emma:
http://emma.com`;
const makeUpHrefs = str => {
let arr = str.split(/\n#/);
arr = arr.map(row => '' + row.match(/NAME:(.*?):/)[1] + '');
return arr;
};
So, makeUpHrefs(str) will return array of html's:
Elis
Emma
Related
I created a upload for multiples videos, and I'm showing in a thumbnail.
It's working ok until here, the problem is, I select for example 3 videos differently, but when loading my preview for all videos are the same.
HTML:
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
JavaScript:
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function (e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (var i = 0; i < files.length; i++) {
var file = files[i];
var thumbnail = document.getElementById("thumbnail");
var pDiv = document.createElement("div");
var video = document.createElement("video");
var div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
var reader = new FileReader()
reader.onload = (function (aImg) {
return function (e) {
var blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function () {
ctx.drawImage(video, 100, 100);
}
}
}
Check the image results (I selected 3 videos):
But the results:
just need to change the vars to lets and it works fine
$('div').on('click', '.closeDiv', function() {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
let fileDiv = document.getElementById("upload");
let fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function(e) {
let filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (let i = 0; i < files.length; i++) {
let file = files[i];
let thumbnail = document.getElementById("thumbnail");
let pDiv = document.createElement("div");
let video = document.createElement("video");
let div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
let reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
let blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
let ret = reader.readAsDataURL(file);
let canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function() {
ctx.drawImage(video, 100, 100);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
I hope this helps
Here is my output image
Here is my code
let input = document.querySelector('input');
var textarea = document.getElementsByClassName('area')[0];
var txtreplace = document.getElementsByClassName('demo')[0];
window.addEventListener('load',
function () {
input.addEventListener('change', () => {
let files = input.files;
if (files.length == 0) return;
const file = files[0];
let reader = new FileReader();
const fruits = [];
reader.onload = (e) => {
const file = e.target.result;
const lines = file.split(/\r\n|\n/);
//console.log(lines.length);
textarea.value = lines.join('\n');
lines.forEach(function (arrayItem) {
//console.log(arrayItem.replace("\u001bE", ""));
var arr1 = arrayItem.replace("\u001bE", "");
var arr2 = arr1.replace("\u001bF", "");
fruits.push(arr2);
});
console.log(fruits.length);
if (parseInt(fruits.length) > 0) {
console.log(fruits);
txtreplace.innerHTML = fruits;
}
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
});
}, false);
function printDiv() {
var divContents = document.getElementsByClassName("demo").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h1>Print PDF <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script> </body>
You can take a look at https://github.com/parallax/jsPDF.
It's js library allow you to build pdf using Javascript.
Otherwise have some solutions to convert html page to pdf ( https://www.html2pdf.co.uk/ ), but I don't think it's what you are looking for.
Exemple of code using JSPDF :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.save('Test.pdf');
Hope it will helps you ;)
Here is my output
Here is my code, here i am changing arrayItem.replace("\u001bE", "") my problem is i want to change for another string also "\x1B-1" --> how to declare this in my code replacing multiple strings at a time.
const file = files[0];
let reader = new FileReader();
const fruits = [];
reader.onload = (e) => {
const file = e.target.result;
const lines = file.split(/\r\n|\n/);
//console.log(lines.length);
textarea.value = lines.join('\n');
lines.forEach(function (arrayItem) {
//console.log(arrayItem.replace("\u001bE", "<b>"));
var arr1 = arrayItem.replace("\u001bE", "<b>");
var arr2 = arr1.replace("\u001bF", "</b>");
fruits.push(arr2);
});
console.log(fruits.length);
if (parseInt(fruits.length) > 0) {
console.log(fruits);
txtreplace.innerHTML = fruits;
}
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
});
}, false);
Not sure if this is what you're asking but you can chain multiple calls to replace like this:
var arr1 = arrayItem.replace("\u001bE", "<b>").replace("\x1B-1", "<something>");
Here is my text field
<input type="file" name="noteMedia[]" multiple id="ssi-upload" />
Variables
const dT = new DataTransfer();
const fileInput = document.getElementById("ssi-upload");
I'm adding copy and paste feature, so i do this
document.onpaste = function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
const dTLocal = new DataTransfer();
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
dTLocal.items.add(blob);
fileInput.files = dTLocal.files;
reader.readAsDataURL(blob);
}
}
$("#ssi-upload").change();
i=i+1
}
and here is my #ssi-upload.change()
$("#ssi-upload").change(function(){
$("#imagePreview").html("");
var file = $(this)[0].files[0];
dT.items.add(file);
fileInput.files = dT.files;
imageIndex = 0;
Array.from(dT.items).forEach(item => {
var blob = item.getAsFile();
var image = new Image()
var reader = new FileReader();
var uri = URL.createObjectURL(blob);
var img = new Image();
img.src = uri;
var imagePreview = "<img width = '150px' height='100px' src='"+uri+"'>";
$("#imagePreview").append('<td style="text-align:center; vertical-align:middle">'+imagePreview+'<p class="text-center" align="text-center"> <a onclick="return deleteImage('+imageIndex+');" href="#"> Delete </a></p> </td>');
imageIndex = imageIndex + 1
});
});
So i want to have two ways to adding file, copy paste and default way from the input field. So, the problem is when i'm trying to delete the item deleteImage
function deleteImage(index){
const fileListArr = Array.from(fileInput.files)
fileListArr.splice(index, 1)
$("#ssi-upload").change()
}
The result is instead of remove file it is adding another file. So, how can i fix it ?
JSFiddle
Remove $("#ssi-upload").change() and add class to td like img-preview and pass this params to deleteImage so you can access that element. check the snippet below.
const dT = new DataTransfer();
const fileInput = document.getElementById("ssi-upload");
var i = 0;
let imageIndex = 0;
document.onpaste = function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
const dTLocal = new DataTransfer();
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
dTLocal.items.add(blob);
fileInput.files = dTLocal.files;
reader.readAsDataURL(blob);
}
}
$("#ssi-upload").change();
i=i+1
}
$("#ssi-upload").change(function(){
$("#imagePreview").html("");
var file = $(this)[0].files[0];
dT.items.add(file);
fileInput.files = dT.files;
imageIndex = 0;
Array.from(dT.items).forEach(item => {
var blob = item.getAsFile();
var image = new Image()
var reader = new FileReader();
var uri = URL.createObjectURL(blob);
var img = new Image();
img.src = uri;
var imagePreview = "<img width = '150px' height='100px' src='"+uri+"'>";
$("#imagePreview").append('<td class="img-preview" style="text-align:center; vertical-align:middle">'+imagePreview+'<p class="text-center" align="text-center"> <a onclick="return deleteImage('+imageIndex+',this);" href="#"> Delete </a></p> </td>');
imageIndex = imageIndex + 1
});
});
function deleteImage(index,obj){
const fileListArr = Array.from(fileInput.files)
fileListArr.splice(index, 1);
console.log(fileListArr);
$(obj).closest('.img-preview').remove();
//$("#ssi-upload").change()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="noteMedia[]" multiple id="ssi-upload" />
<table class="table" id="imagePreview"><tbody></tbody></table>
I'm using HTML5 and JavaScript for reading a text file, but now I need to read exactly 2 text files and do the same operations as done before but for the two files.
For the second file I've been trying with: var file2 = files[1]; and add a multiplein the html input, but how can I do it for the reader.onload = function (e) { part? I want to parse the two files in the same way, not only one.
Here is the code (simplified):
<!DOCTYPE html>
<html>
<head>
<title>Read and Parse Lynis Log</title>
<script>
function processFiles(files) {
var file = files[0];
var reader = new FileReader();
var textParsed = [];
reader.onload = function (e) {
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
var text = e.target.result;
var lines = text.split("\n");
for (var i= 0; i < lines.length; i++) {
textParsed[i] = lines[i];
}
var testsPerformed = null;
var suggestions = [];
var suggestion = null;
var auxSug = null;
for (var j = 0; j < lines.length; j++) {
if (textParsed[j].includes("tests_executed")){
testsPerformed = textParsed[j];
}
if (textParsed[j].includes("suggestion[]")) {
suggestion = textParsed[j];
suggestions.push(suggestion);
}
}
if (typeof(Storage) !== "undefined" && textParsed.length >= 1) {
//Store
localStorage.setItem('storedText', textParsed);
localStorage.setItem('tests', testsPerformed);
localStorage.setItem('suggestions', suggestions);
}
};
reader.readAsText(file);
}
</script>
</head>
<body>
<input id="fileInput" placeholder=":input" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>
You only need to initialize a FileReader for each file and start readAsText for every file. The function will be the same, I've modify the output so the content is not cleared with each file that is loaded.
<!DOCTYPE html>
<html>
<head>
<title>Read and Parse Lynis Log</title>
<script>
function processFiles(files) {
var file = files[0];
var textParsed = [];
function onReadAsText(e) {
var output = document.getElementById("fileOutput");
output.textContent = output.textContent + e.target.result;
var text = e.target.result;
var lines = text.split("\n");
for (var i= 0; i < lines.length; i++) {
textParsed[i] = lines[i];
}
var testsPerformed = null;
var suggestions = [];
var suggestion = null;
var auxSug = null;
for (var j = 0; j < lines.length; j++) {
if (textParsed[j].includes("tests_executed")){
testsPerformed = textParsed[j];
}
if (textParsed[j].includes("suggestion[]")) {
suggestion = textParsed[j];
suggestions.push(suggestion);
}
}
if (typeof(Storage) !== "undefined" && textParsed.length >= 1) {
//Store
localStorage.setItem('storedText', textParsed);
localStorage.setItem('tests', testsPerformed);
localStorage.setItem('suggestions', suggestions);
}
};
for (var i = 0; i < files.length; i++){
var reader = new FileReader();
reader.onload = onReadAsText;
reader.readAsText(files[i]);
}
}
</script>
</head>
<body>
<input id="fileInput" placeholder=":input" type="file" size="50" onchange="processFiles(this.files)" multiple>
<div id="fileOutput"></div>
</body>
</html>