I have the following JS / HTML code:
<input type="text" class="file" name="file_info" id="file_info">
<div class="file_upload">
<input type="file" id="file_upload" onchange="name();">
</div>
<script>
function name() {
var fileName = document.getElementById("file_upload").value;
var fnSplit = fileName.split(/[\/\\]/);
fileName = fnSplit[fnSplit.length - 1];
document.getElementById('file_info').innerHTML = 'Fred Flinstone';
}
</script>
I want that after I upload file, the file-name will shown in the tput text, but this cide doesn't work.
How can I fix it?
Update : The file name should be inside the input text
Move your script element before the input element. You had better put the script element inside your head like this
Demo
Have update the answer!
You can try this code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var fileName =document.getElementById("file_upload").value;
var fnSplit = fileName.split(/[\/\\]/);
fileName = fnSplit[fnSplit.length - 1];
document.getElementById('file_info').value = fileName
}
</script>
</head>
<body>
<input type="text" class="file" name="file_info" id="file_info">
<div class="file_upload">
<input type="file" id="file_upload" onchange="myFunction();">
</div>
</body>
</html>
Do it like this:
HTML
<div class="file_upload">
<input type="file" id="file_upload">
</div>
<div id="file_info"></div>
JS
function name(file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
document.getElementById('file_info').innerHTML = "Filename: " + file.name + "\nContent: " + event.target.result;
};
reader.onerror = function () {
alert('Unable to read ' + file.name);
};
}
document.getElementById('file_upload').onchange = function () {
name(this.files[0]);
};
DEMO
Related
I am using this code for making my things workaround. By using the below code I'm trying to get the image name and its the size in bytes/Mbps.
'use strict';
const myImages = [];
function addImage(imageBlob) {
myImages.push(imageBlob);
}
function redrawImages() {
const divForImages = document.getElementById('myImages');
divForImages.innerHTML = '';
myImages.forEach((imageBlob) => {
const img = document.createElement('img');
img.src = URL.createObjectURL(imageBlob);
divForImages.appendChild(img);
});
}
function addImageAndRedraw() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 1) {
addImage(fileInput.files[0]);
redrawImages();
} else {
alert('No file selected. Select a file and try again.');
}
}
const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My images</h1>
<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">
<hr>
<div id="myImages"></div>
<script src="album.js"></script>
</body>
</html>
I have tried to use img.name but it's deprecated.
How to do it? Any help would be highly appreatiated
imageBlob is not a blob. It's a File, which has a name property. The name doesn't get transferred to the img DOMElement.
<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
<!--
function handleFiles(input)
{
for (i = 0; i < input.files.length; i++)
{
var reader = new FileReader();
reader.onload = function()
{
alert(reader.result)
};
reader.readAsText(input.files[i]);
}
}
//-->
</script>
I am trying to display the contents of some files that I upload. It works fine if I select a single file, but if I select multiple files, only the content of one file is displayed, rest all are blank. What am I doing wrong?
You just need to amend it slighty to do the following:
<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
function handleFiles(input)
{
for (var i = 0; i < input.files.length; i++) { //for multiple files
(function(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
// get file content
var text = e.target.result;
alert(text)
}
reader.readAsText(file, "UTF-8");
})(input.files[i]);
}
}
</script>
Reference: https://stackoverflow.com/a/9815648/3088780
I think jquery help you easily
HTML:
<script src="jquery-2.2.0.min.js"></script>
<input type="file" multiple="multiple" />
<ul id="output">
</ul>
Jquery:
$('input:file[multiple]').change(
function(e){
console.log(e.currentTarget.files);
var numFiles = e.currentTarget.files.length;
for (i=0;i<numFiles;i++){
fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
filesize = Math.round(fileSize);
$('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
$('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
}
});
reference from : https://stackoverflow.com/a/7719334/5566169
I want to rename my image captured using camera at client side using javascript. I know it is not directly possible due to security reasons.
I already did it in server side but I need to rename my image before uploading to server. Can I make a copy of image and then rename it? If I can, how would I do it?
This is my javascript file
var oFile = new File([""],"");
var clonedImage = new Image();
//cloning function
function cloneImage ()
{
alert("cloning1");
clonedImage.name = oFile.name;
document.getElementById("image_file").appendChild( clonedImage);
alert("cloning2");
alert("success" +clonedImage.name );
}
function fileSelected()
{
// get selected file element
oFile = document.getElementById('image_file').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
alert("Not a proper file format");
return;
}
cloneImage();
alert("cloning");
var oReader = new FileReader();
oReader.readAsDataURL(oFile);
alert("success = "+oFile.name);
alert("success = "+oFile.type);
}
function startUploading()
{
var formdata = new FormData(document.getElementById("upload_form"));
var imageName = oFile.name;
formdata.append("image1",oFile);
var request = new XMLHttpRequest();
request.open('POST', 'http://10.182.xx.xx/upload.php',true);
alert("start uploading");
alert("success ="+oFile.name);
request.send(formdata);
alert("finished");
}
This is my html file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<link href="file:///android_asset/main.css" rel="stylesheet" type="text/css" />
<script src="file:///android_asset/script.js" type ="text/javascript"> </script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="POST" action="upload.php">
<div>
<div><label for="image_file">Please select image file</label></div>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelected()" /></div>
</div>
<div>
<input type="button" name="image1" id="image1" value="Upload" onclick="startUploading()"/>
</div>
</form>
</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]);
};
I am just working on a web site for fun and I was wondering if you could use JavaScript to read in a local text file and then display it HTML. So for example if I had a text file saved with my project then could I write a function in JavaScript that reads the entire file and then just displays all that text within on the web page?
I've looked around and tried to find something that will do this, but I don't think I fully understand. I have:
function readFile(fileName){
var fileRead = new ActiveXObject('Scripting.FileSystemObject');
text = fileRead.OpenTextFile(fileName, 1, false, 0);
while(!text.AtEndOfSteam){
text += text.ReadLine();
}
text.Close();
}
I don't know if this is will work or do what I want to do. So my question is, how do I use JavaScript to read in a text file, then display the contents of that text file on a webpage in HTML?
You have to use the File API.
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
<input type="file" id="myFile">
<div id="output"></div>
EDIT
After reading your comment, i think this is what you want.
var output = document.getElementById("output");
$("a").on("click", function (e) {
e.preventDefault();
$.ajax(this.href).done(function(data) {
output.textContent = data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Link to file
<html>
<head>
<title>reading file</title>
</head>
<body>
<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
</script>
</body>
</html>