I am trying to develop an application where it allows the user to choose a file and then read it and display the text on the screen.
My code can be found here: http://jsfiddle.net/5sy076n5/1/.
<html>
<head>
<title>FileReader Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read <a onClick="testRead();">File</a></p>
</body>
</html>
You may notice that I don't have an input tag inside the body. This is because I want the user to click on the tag rather than the text.
My problem is what I am suppose to do after fileSector.click();? How can I get what file was chosen?
You have already created the input element on runtime and you have the reference of it fileSelector
You can simply use this variable to FileReader API
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
fileSelector.addEventListener('change', function () {
var file = fileSelector.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var text = reader.result;
console.log(text); // Select *.txt file and see console
}
reader.readAsText(file);
});
}
DEMO
Related
I am very new to Dynamic WebTwain therefore apologies in advance If I am asking something to basic.
I currently have scanning functionality available in my Dynamic WebTwain but I need to implement Uploading functionality as well. For that I need to use ActiveX Object and DynamicTwain Cab Files. I am reading the documentation of WebTwain but there they are not using ActiveX or Cab files.
Currently, I am using below method for uploading,
DWObject.LoadImageEx("",1);
However, I do not want to upload the images in designated image viewer of Dynamosoft. I want to upload images in a custom Image viewer. For that, I am assuming that I will need to get the object of selected image for it to load in the custom image viewer. How can I do that?
Looking for guidance.
The LoadImageEx method is used to load local images to the Dynamic Web TWAIN image viewer, not for uploading images. To load images to a custom viewer, you just need to use the input element and FileReader.
For example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="file" name="document" id="document" accept="image/*">
<div id='customviewer'></div>
<script>
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
var dataURL = e.target.result, img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
}
fileReader.readAsDataURL(file);
}
</script>
</body>
</html>
Using LoadImageEx:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/dwt#17.1.1/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input class="button" type="button" value="Load Images" onclick="loadFile()" />
<div id='customviewer'></div>
<script type="text/javascript">
var element = document.createElement('div');
var dwtObj = null;
Dynamsoft.DWT.CreateDWTObjectEx({
WebTwainId: '1'
},
function (obj) {
dwtObj = obj;
dwtObj.Viewer.bind(element);
},
function (err) {
console.log(err);
}
);
function loadFile() {
if (dwtObj) {
dwtObj.LoadImageEx('', 5,
function () {
dwtObj.ConvertToBlob(
[dwtObj.CurrentImageIndexInBuffer],
Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
function (result, indices, type) {
var urlCreator = window.URL || window.webkitURL;
var dataURL = urlCreator.createObjectURL(result);
var img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
},
function (errorCode, errorString) {
}
);
},
function (errCode, error) {
}
);
}
}
</script>
</body>
</html>
I can read file in the same folder than the script js, but not in another folder.
HTML part:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<button class="mybutton" id="fileSelect">Select a file</button>
<script src="https://d3js.org/d3.v3.min.js"></script>
or
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</html>
D3.JS part:
var element = document.createElement('div');
element.innerHTML = '<input type="file" accept=".json">';
var fileInput = element.firstChild;
var fileSelect = document.getElementById("fileSelect");
fileInput.addEventListener('change', function() { // wait for file selection
var file = fileInput.files[0];
var file_name = file.name;
// load the data
d3.json(file_name, function(error, graph) {
do_things;
}
});
fileSelect.addEventListener("click", function () { // wait for click on "select a file" button
fileInput.click();
});
Where is my error?
Thank you in advance
I have a program that uses a form to receive a .png file from the user, which is then dynamically set as an img. The form seems to allow me to select a file, but does not display that file. I was under the assumption that I could set the src for the img as the variable(wscimginput) associated with the user's file, but that does not seem to be working? Is there another way I should approach this?
Here's the piece of code dealing with the form and the image.
var wscimgform = document.createElement("form");
var wscimginput = document.createElement("input");
wscimgform.appendChild(wscimginput);
_wsc.appendChild(wscimgform);
wscimginput.setAttribute("id", "wscimginput");
wscimginput.setAttribute("type", "file");
wscimginput.setAttribute("accept", "image/*");
var wscimg = document.createElement("img");
_wsc.appendChild(wscimg);
wscimg.setAttribute("src", "wscimginput");
wscimg.setAttribute("position", "absolute");
wscimg.setAttribute("height", "80%");
wscimg.setAttribute("top", "20%");
This is adapted from the linked article without jQuery.
<html>
<head>
</head>
<body>
<div id="formDiv">
</div>
<script type="text/javascript">
var f = document.createElement("form");
var fi = document.createElement("input");
fi.setAttribute("id", "daFile");
fi.setAttribute("type", "file");
fi.setAttribute("accept", "image/*");
fi.addEventListener("change", showPreview);
f.appendChild(fi);
var i = document.createElement("img");
i.setAttribute("id", "daImg");
i.setAttribute("width", "200px");
i.setAttribute("height", "200px");
f.appendChild(i);
document.getElementById("formDiv").appendChild(f);
function showPreview(ev) {
if (ev.target.files && ev.target.files[0]) {
var r = new FileReader();
r.onload = function (e) {
document.getElementById("daImg").setAttribute("src", e.target.result);
}
r.readAsDataURL(ev.target.files[0]);
}
}
</script>
</body>
</html>
So, I've made a java program that runs through a list of IPs, pings them, and updates a file on the devices status. I want to know how to open the file into a webpage and update it, so a user can open the webpage and just see a list of data from the file, they don't have to select the file or refresh the page.
Is this feasible to do with javascript/html?
This is the code I'm working with so far:
<html>
<head>
<title>Import Data</title>
<script>
var openFile = function() {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile(),1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile()'><br>
<div id='output'>
</body>
</html>
But I can't seem to hunt down where to hardcode the path to the file in. When I use this manual selection method, it'll update once, whether the file increases in elements or decreases.
EDIT:
I've narrowed it down to where the file needs to be uploaded:
<html>
<head>
<title></title>
<script>
function uploadFile() {
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code: " + event.target.error.code);
};
var fileInputElement = document.getElementById("FileName");
reader.readAsText(fileInputElement.files[0]);
console.log(fileInputElement.files[0]);
}
</script>
</head>
<body>
<input type='file' accept='text/plain' value='RESULTS.txt' id='FileName' onchange='uploadFile()' style="display:none;">
</body>
</html>
If I try to type just a file path in a string, it complains it's not type 'blob'. When I do this, it requires the user to enter a file name, but obviously it can't be seen. How can I make that 'file' variable a static variable so it always opens a that file without prompting the user?
Doing some more research, it's security reasons as to why you can't access a file from the local computer.
So, in lieu of all that, I made some code that will constantly load the selected file so you can see whenever it changes:
<html>
<head>
<title>Import Data</title>
<script>
var input;
var openFile = function() {
var reader = new FileReader(event);
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile,1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='input = event.target; openFile(event);'><br>
<div id='output'>
</body>
</html>
I have the following code -
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("myFile");
alert(x.value);
document.getElementById("picture").src=x.value;
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\Shin\Desktop\410.svg">
</body>
</html>
Initailly its showing the image, after I select another file and click the button, it shows me the path in the alert box perfectly but, it doesnt render the new pic and its showing a red cross at the place what you see in image when the src is incorrect. I used chrome browser.
try this...
<html>
<head>
<script>
function myFunction()
{
var input = document.getElementById("myFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("picture");
img.src = event.target.result;
}
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\rajpc\Pictures\1390.jpg">
</body>
</html>
this would definitely work....
Change your img src as desired..
I hope this should help you....
you'll need URL.createObjectURL for that:
url=URL.createObjectURL(x[0]);
To read a local file you would need to use the FileReader Api.
function myFunction() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("picture").src = reader.result;
};
reader.readAsDataURL(document.getElementById("myFile").files[0]);
};