With the help of following code i will get the 100% ok result but if i need to trigger the same as automatic how it is possible.
<!DOCTYPE html>
<html>
<head>
<title>reading file</title>
<script type="text/javascript">
var reader = new FileReader();
function readText(that){
if(that.files && that.files[0]){
var reader = new FileReader();
reader.onload = function (e) {
var output=e.target.result;
//process text to show only lines with "li class="Body-P-P1":
output=output.split("\n").filter(/./.test, /\li class="Body-P-P1"/).join("\n");
document.getElementById('main').innerHTML= output;
};//end onload()
reader.readAsText(that.files[0]);
}//end if html5 filelist support
}
</script>
</head>
<body>
<input type="file" onchange='readText(this)' />
<div id="main"></div>
</body>
</html>
Kindly let me know the way i run the above code automatically trigger whenever i click on any programe which contain the same code.
Related
I'm currently developing a simple WEB Application that allows users to upload a photo.
That photo's EXIF GPS data is then supposed to be extracted to a variable that will then be used in a google maps widget, with a "pin" on the location of shooting. The idea is then generate a link for users to be able to share both the photo and the google maps widget on Forums.
The issue at the moment is in the use of the EXIF.js library.
I currently have a simple html page just to test/try this such library and the code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Localização da foto</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var imagem = document.getElementById("img1");
var modelo = EXIF.getTag(imagem, "Model");
document.getElementById("info_model").innerHTML = modelo;
}
</script>
</body>
</html>
The expected result should be for it to say: "iPhone 6S Plus"
The actual result is: "undefined"
I can confirm the photo used to test the code does in fact have valid EXIF
New code as suggested:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
</head>
<body>
<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>
<script src="exif.js"></script>
<script>
window.onload=getExif;
function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var model = EXIF.getTag(this, "Model");
var modelo = document.getElementById("info_model");
modelo.innerHTML = `${model}`;
});
}
</script>
</body>
</html>
getData works asynchronously and as such, needs to be passed a callback function, which your code does not have. You can only call getTag after you've called getData.
See the example on
https://github.com/exif-js/exif-js
Start with calling the EXIF.getData function. You pass it an image as a parameter:
either an image from a <img src="image.jpg">
OR a user selected image in a <input type="file"> element on your page.
function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = `${make} ${model}`;
});
}
window.onload = getExif;
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<pre>Make and model: <span id="makeAndModel"></span></pre>
<img src="path/to/image.jpg" id="img1" />
I know this may be already solved, but I'd like to offer alternative solution using library exifr. It's new, maintained and actively developed library with focus on performance.
<img src="image1.jpg" id="img1" />
<h1>Modelo da câmara</h1>
<p id="info_model"></p>
<script src="https://unpkg.com/exifr#2.1.3/index.js"></script>
<script>
async function getExif() {
var img1 = document.getElementById("img1");
let output = await exifr.parse(img)
var model = EXIF.getTag(this, "Model");
var modelo = document.getElementById("info_model");
modelo.innerHTML = output.Model;
}
</script>
The important part here is the async/await. The image is loaded asynchronously so you need to wait until it's loaded and parsed. This is similar to above mentioned callbacks but more modern.
You can check out the library's playground and experiment with images and their output, or check out the .repository and docs
Javascript: I want to read the content of a text file on my desk but without using XMLHttpRequest or input-type-file. I just want to give the path of the file as input to the javascript function. Any help please ?
Here is a code snippet to do such a thing. I am afraid that you need to file selector due to the sandbox.
<html>
<head>
<title>Example reading a file</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function handleFileSelect(evt) {
var reader = new FileReader();
reader.onload = function(e) {
console.log(reader.result);
};
reader.readAsText(this.files[0]);
}
$(document).ready(function () {
$('#file').change(handleFileSelect);
});
</script>
</head>
<body>
<input type="file" id="file" name="files" />
</body>
I have hdf5 file created using c++ application.i want to read the same hdf5 file inside browser using javascript.
Hdf5 file will be download from server using xhr or web socket request and the content of the file will be stored in javascript variable then i want to read the content of the variable.
Please tell me any javascript library available to read the hdf5 inside browser.
i tried "https://github.com/HDF-NI/hdf5.node" but it supports only for nodejs.
Is it possible to convert the above library to support reading inside browser.
It is only able to read a subset of HDF5 files, but this is something that works:
https://github.com/usnistgov/jsfive
It basically covers all the files that can be read by the pyfive library (https://github.com/jjhelmus/pyfive), as it is a direct port of that library.
The best two libraries that I found are jsfive and h5wasm:
Sample code jsfive:
$(document).ready(function() {
$("#datafile").change(async function loadData() {
var file_input = $("#datafile")[0];
var file = file_input.files[0]; // only one file allowed
let datafilename = file.name;
let reader = new FileReader();
reader.onloadend = function(evt) {
let barr = evt.target.result;
var f = new hdf5.File(barr, datafilename);
let value = f.get('main').value
let attrs = f.get('main').attrs
// do somthing with f
}
})
})
<!DOCTYPE html>
<html lang="eng">
<head>
</head>
<body>
<input type="file" id="datafile" name="file">
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import JSFive -->
<script src="https://cdn.jsdelivr.net/npm/jsfive#0.3.7/dist/hdf5.js">
<!-- Import main JS -->
<
script src = "app.js" >
</script>
</body>
</html>
Sample code h5wasm:
import * as hdf5 from "https://cdn.jsdelivr.net/npm/h5wasm#latest/dist/esm/hdf5_hl.js";
await hdf5.ready;
$(document).ready(function() {
$("#datafile").change(async function loadData() {
let file = $("#datafile")[0].files[0];
let data_filename = file.name;
let ab = await file.arrayBuffer();
hdf5.FS.writeFile(data_filename, new Uint8Array(ab));
let f = new hdf5.File(data_filename, "r");
// do somthing with f
f.close()
})
})
<!DOCTYPE html>
<html lang="eng">
<head>
</head>
<body>
<input type="file" id="datafile" name="file">
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import main JS -->
<script type="module" src="app.js" ></script>
</body>
</html>
Also interesting jsfive with callback:
function storeTarget(result, file_name) {
f = new hdf5.File(result, file_name);
}
$("#datafile").change(async function loadSource() {
var file_input = $("#datafile")[0];
var file = file_input.files[0];
let datafilename = file.name;
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => storeTarget(reader.result, datafilename);
})
I have two examples using setTimeout(). This one works:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization','1',{packages:['table']});
function start() {
setTimeout(ShowClipboardContent, 2000);
}
function ShowClipboardContent() {
var data = new google.visualization.DataTable(window.clipboardData.getData('Text'));
var table = new google.visualization.Table(document.getElementById('div'));
table.draw(data,{showRowNumber: true});
}
</script>
</head>
<body>
<button onclick='start();'>Show text data in clipboard</button>
<div id='div'></div>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization','1',{packages:['table']});
</script>
<script type='text/javascript'>
//runs powershell and copies output onto clipboard
function powershell(t) {
//object that will execute powershell
var run = new ActiveXObject("Shell.Application");
//breaks the list of servers into array
var servers = t.textarea.value.split('\n');
//script that powershell will run
var script = 'some powershell command';
//path to powershell.exe
var program = 'C:\\Windows\\system32\\WindowsPowerShell\\v1.0\\powershell.exe';
//putting it all together
run.ShellExecute(program,script,'','open','1');
setTimeout(drawTable, 10000);
}
//draws data table using data from clipboard
function drawTable() {
var data = new google.visualization.DataTable(window.clipboardData.getData('Text'));
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(data, {showRowNumber: true});
}
</script>
</head>
<body>
<div id='form'>
<form>
Enter name(s):<br />
<textarea id='textarea' style='width:20%; height:500px;'></textarea><br />
<button onclick='powershell(this.form)'>Query</button>
</form>
</div>
<div id='table'></div>
</body>
</html>
Just to reiterate: the problem is that setTimeout() won't work on the second code but works on the first one and I would like to know why because I see no difference.
try to add a
console.log(drawTable);
just before your timeout. if it returns 'function', it'a good, your timeout will be ok. if not return anything, your activeX script should break the code
i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.