javascript to show the selected image in jsp page - javascript

i use the below java script code to preview the selected image in the jsp page it works in firefox and ie 11 but not works in ie9 is there any alternate way to make it work in ie9
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
to check jpg file start
var fileInput = document.getElementById("imageId").files[0];
if (fileInput.type.match('image/jpeg'))
{
}else{document.getElementById("imageId").value='';
alert("Please Select a Image File.");
return false;
}
to check jpg file end
oFReader.readAsDataURL(document.getElementById("imageId").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("upImgId").src = oFREvent.target.result;
};
};
</script>
<s:file name="hr_Family_Information_Bean.image" id="imageId" label="Image" required="true" onchange="PreviewImage();"/>
<img class='imagem_artigo' id="upImgId" src="data:image/png;base64,${hr_Family_Information_Bean.imageEncodeData}" alt="Image Not Found" height="220" width="165" title="${hr_Family_Information_Bean.memberName}">

You are using filereader that is not supported by ie9
pls tak a look at:
http://caniuse.com/#feat=filereader
You should use some polyfill (sth that works also on IE9)Here is a list pls use the one that is the most appropriate for you.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#file-api

Related

How can I prevent a specific item from being downloaded from my html file? (<input type="file">)

I need to "convert" a lot of mp3 files to html players, and I want to have other people (lay people) doing it in an easy way. So after this, I can download each player with its own mp3 embeded.
I am using the following code for this, the idea is that someone upload the mp3 file, download the page (to have the player functional embeded with mp3), but, when I download the page, does not bring the input button input type="file".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="file">
<audio controls id="myAudio" controlsList="nodownload" autoplay></audio>
<script>
var $audio = $('#myAudio');
$('input').on('change', function(e) {
var target = e.currentTarget;
var file = target.files[0];
var reader = new FileReader();
console.log($audio[0]);
if (target.files && file) {
var reader = new FileReader();
reader.onload = function (e) {
$audio.attr('src', e.target.result);
$audio.play();
}
reader.readAsDataURL(file);
}
}); </script>
Try adding the "accept" attribute to the input tag.
<input type="file" accept=".mp3" />

File reader Javascript

currently i am choosing a file and converting to base64 string and displaying in html page.see the below code.
But i want in such a way that while loading the function it will automatically fetch the file from the location where the image saved and convert to base64 and display. I just want to skip the manual way of choosing..please help
<html>
<body>
Choose File: <input id="imageToLoad" type="file" onchange="displayImage();" />
<p>Image encoded</p>
<textarea id="base64TextArea" style="width:550;height:240" ></textarea>
<img id="myImg" width="218" height="300" src="" />
<script type="text/javascript">
function displayImage()
{
var filesSelected = document.getElementById("imageToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
base64TextArea.innerHTML = fileLoadedEvent.target.result;
document.getElementById("myImg").src = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
</body>
</html>
You can't fetch arbitrary files on a client's computer with JS. Using most browsers, the client must manually choose a file to be processed by the script.
If you think about it, it would be a major security flaw if any website could access any file on your computer.
I'm not sure why Base64 is an important aspect here. Please give some details if converting the image to text is a specific requirement of your needs, but if you only want to display and reference the image, you can start with this:
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
document.getElementById("myImg").src = URL.createObjectURL(fileToLoad);
}
This will use an "object URL" which is a shorthand way of referring to a file that has been drag/dropped, or picked from an <input>

FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed

FileReader onload not getting fired on second time when the same file still selected with IE11 but the contents of file has changed, it's getting fired all the time for FireFox,Chrome.
Operation Details
On First Click, its all okay for all browsers(but IE sometime still missing some words from file).
After that I changed the contents of the file.
And then I click second attempt to btnDownload, Firefox and Chrome still reading the updated contents. BUT IE DOES NOT WORK!
.html
<input type="file" id="fileSelect" style="" accept=".csv">
<a type="button" class="btn" id="btnDownload" onclick="csvDownload()"
download> CSV DOWNLOAD </a>
myjavascript.js
var fileInput = document.getElementById("fileSelect"); //<input type="file" id="fileSelect">
var result = "";
readFile = function() {
changeAPInfoName();
if (!isFileSupported()) {
console.log('The browser does not support the API.');
} else {
if (fileInput.files.length > 0) {
var reader = new FileReader();
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
reader.readAsText(fileInput.files[0]);
reader.onerror = function() {
console.log('The file cannot be read.'+fileInput.files[0].fileName);
};
}
// EVENT FOR DOWNLOAD BUTTON!!!!
function csvDownload(){
readFile();
// using ajax to sent info from files and get download file.
}
Please help me with following issue.
How can I get to the line in reader.onload method although file contents are changed. alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)"); .
Replace this
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
with
reader.addEventListener("load",function(){
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
});
I hope this is helpful. I was facing the same problem and I used this method and it worked
Example of working FileReader:
<html>
<head>
<script>
function read(){
//Select the element containing file
var file =document.querySelector('input[type=file]').files[0];
//create a FileReader
reader = new FileReader();
//add a listener
reader.addEventListener('load',function(){
alert(reader.result);
},false);
if(file){
//ReadFile
reader.readAsDataURL(file);//You can read it in many other forms
}
}
</script>
</head>
<body>
<input type="file" name="myFile" id="myFile" onchange="read()">
</body>
</html>
For more on FileReader check this document out : Link

How to call manually the onchange event of fileupload control with C#

I have a web page with file upload controller an image.
<img src='#' id='imageId' alt='your image' height='64' width='64' src='placeholder.png' class='placeholder' >
<input type='file' id='myID' onchange='previewImage(this)' accept='image/*' data-thumbnail='imageId'>
Actually above HTML code is derived from my asp code.
Ok..Now what I want to do is generate these two components with manual coding.So I start like this.
System.Web.UI.WebControls.Image preview = new System.Web.UI.WebControls.Image();
preview.ID = "imageId";
preview.Height = 64;
preview.Width = 64;
FileUpload tt = new FileUpload();
tt.ID = "myID";
But there are some attributes remaining in the original HTML code.I do not know exactly how to implement them with C# code.
Further for the "onchange" event of the File upload control have to be implemented."previewImage(this)" is javascript function which I used to preview the selected image.
Sp please help me to solve these things with c# code.
Try this,
tt.Attributes.Add("onchange", "previewImage()");
May this help you:
tt.Attributes["onchange"] = "previewImage(this)";
I think this may help you...
javascript
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imageId').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<img src='#' id='imageId' alt='your image' height='64' width='64' class='placeholder' >
<input type='file' id='myID' onchange='previewImage(this)' >
to call this function in c#
ScriptManager.RegisterStartupScript(this, this.GetType(), "Javascript", "javascript:previewImage(input); ", true);

To display text from a txt file using javascript

How to read text from a txt file with one button to browse the file and other button to display text. Pls help me in getting the code. i have tried many codes but othing worked. some code was like this. Thanks in advance
<!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 "#":
output=output.split("\n").filter(/./.test, /\#/).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>
You should properly read an article like this: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Dont think this line is working properly:
output=output.split("\n").filter(/./.test, /\#/).join("\n");
Try changing it to:
output=output.split("\n").filter(function(l) {
//return /^\#/.test(l); // Starting with #
return l.indexOf('#') > -1; // Containing #
}).join("\n");
It would be interesting to see if this would work as well:
output=output.split("\n").filter(/\#/.test.bind(/\#/)).join("\n");
The second arguments passed to the .filter method is the context:
array.filter(callback[, thisObject])
Get the input file, use FileReader() to read it,on file load get text that matches the pattern. Finally display it through "main" div. Should work..
HTML :
<input id="fileInput" type="file"/>
<div id="main"></div>
jQuery :
$(function(){
$("#fileInput").change(function(e){
var myFile = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
var output = e.target.result;
output=output.split("\n").filter(/./.test, /\#/).join("\n");
$("#main").text(output);
};
reader.readAsText(myFile)
});
}
)
Demo

Categories