JQuery : Get image element from url - javascript

In JQuery, How can i get image element from url?
For example,
<input type="file" id="fileInput"/>
var fileInput = document.getElementById('fileInput');
Here its is done via file picker in html5. But, how could i get image from just url?
My requirement is to get image from url.
var fileInput = document.getElementById('fileInput'); //instead of this how could i get element from url
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
//save to file api
} else {
fileDisplayArea.innerHTML = "File not supported!";
}
});
Please help,
Thanks

Do like that:
var fileInput = document.getElementById('fileInput'); //instead of this how could i get element from url
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = (function(file){
return function(e){
// do something
}
})(file)
reader.readAsDataURL(file):
} else {
fileDisplayArea.innerHTML = "File not supported!";
}
});
Reading files in JavaScript using the File APIs

Related

How to play audio loaded via file input

I want to load an audio file via input file reader and then be able to play it ...
Here is the process of creating file blob and assign the audio source to this blob:
fileInput.on('change', readFile);
function readFile(e) {
const input = e.target;
if(input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
const binaryData = e.target.result;
const binary = convertDataURIToBinary(binaryData);
const blob = new Blob(binary, {type: input.files[0].type });
console.log('inserting blobXX', blob);
recordedAudioComponent.src = URL.createObjectURL(blob);
data.instructAudios[component] = blob;
console.log('recordedAudioComponent.src', recordedAudioComponent.src);
}
reader.readAsDataURL(input.files[0]);
}
}
And here is the result of above code on console:
Now I'm trying to play the recordedAudioComponent which is an audio tag with the source right?
const recordedAudioComponent = document.getElementById(`recordedAudio-instruct-${component}`);
console.log(recordedAudioComponent)
recordedAudioComponent.play();
And here is the error it produces:
How can I fix this and play the audio?
EDIT: Here is the function to get the blob in the first code:
var BASE64_MARKER = ';base64,';
function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
You don't need any of convertion, blob is actually pretty similar from the file itself and the method URL.createObjectURL accepts file as argument, all you need to do to play the audio file from your browser is set the src attribute as the url created, something like this:
<body>
<input style="display: block;" type="file" onchange="loadAudioFile(this)">
<audio src=" " id="track" controls>
</audio>
<script>
function loadAudioFile(e) {
const url = URL.createObjectURL(e.files[0]);
document.getElementById('track').setAttribute('src', url);
}
</script>
</body>
<input type="file" name="fileInput" id="fileInput">
<script>
const fileInput = document.querySelector('#fileInput');
fileInput.onchange = readFile;
/** #type {AudioNode} */
const audio = document.createElement( 'audio' );
function readFile(e) {
const input = e.target;
if(input.files && input.files[0]) {
const reader = new FileReader();
reader.onloadend = function (e){
audio.src = e.target.result;
audio.play();
}
reader.readAsDataURL(input.files[0]);
}
}
</body>

Javascript save video file to server in javascript

I have <input type="file" name="Video" id="videoSelect" accept="video/mp4" class="FileUpload" /> in my HTML and I want to save the file selected on my server. I already have
var videoID = uuidv4();
var VideoFile = videoSelector.files[0];
var reader = new FileReader();
reader.readAsDataURL(VideoFile);
var senddata = new Object();
senddata.name = videoID;
senddata.size = VideoFile.size;
senddata.type = VideoFile.type;
reader.addEventListener(
"load",
function () {
vidprv.src = reader.result;
vidprv.style.display = "block";
senddata.fileData = reader.result;
},
false
);
in my JavaScript file. I don't know how to save it to the server now

How to upload file in IE8 to server

I have to upload in IE8 in enterprise mode.
In IE9 or higher I can do like
<input type="file" accept="jpg" id="inputer" onchange="uploadImage(event)">
function uploadImage (event){
var fileList = event.target.files;
console.log(fileList);
}
but how do that in IE8, because in IE8 event.target == undefined?
It was researched here
I have to upload that files into server
We did some function like
var FileReader = (function () {
function YourOwnEncoderStringTOArray(str){//your code}
function FileReader(){
var reader = new ActiveXObject("Scripting.FileSystemObject");
this.getFileSize = function(filename){
var file = reader.getFile(filename);
return file && file.size;
};
this.getBytes = function (filename){
var file = reader.getFile(filename);
var size = file.size;
var stream = file.OpernAsTextStream(1,0);
var str = stream.Read(size);
stream.Close();
return YourOwnEncoderStringTOArray(str);
};
}
return FileReader;
})();
And you can call it from your js like
window.YourFunc = function(event){
var filename = $('myElementId').val();
var fileReader = new FileReader();
var fileSize;
try{
fileSize = fileReader.getFileSize(filename);
}catch(e){
// your code to explain why fileReader do not answer
}
}

How to insert Image in iframe using JavaScript?

I'm making my own rich text editor. So instead of inserting an image through URL, I'm doing through local files.
Iframe
<iframe style="width:100%; height: 300px;" name="richTextField"></iframe>
My Question is How to insert an image in an iframe?
function image()
{
$('#myModal').modal('show');
var file = document.getElementById("image").files;
$('#uploadImage').click(function(){
loadImageFileAsURL();
});
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("image").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
//How to insert Image??
$('#myModal').modal('hide');
};
fileReader.readAsDataURL(fileToLoad);
}
}
}

JavaScript: displaying a file in a text area:

I want to display the content of a file in a text area.
I use this script to do that but when I click in the open button the text doesn't appear:
function loadFileAsText()
{
document.getElementById("textoNormal").scrollTop=0;
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("textoNormal").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
id=1;
}
textoNormal: is the id of my text area
Read file of content in onChange event of File Upload Control.
function OnUpload() {
var obj = document.getElementById("<%=FleUldLogo.ClientID%>");
var source = obj.value;
var file = obj.files[0];
var textarea=$("#txtar");
var reader = new FileReader();
reader.onloadend = function () {
textarea.value= reader.result;
}
reader.readAsText(file);
return true;
}
I called your function in a jQuery onClick and it worked well,
jquery
$(document).ready(function(){
$('.clickMe').click(function(){
document.getElementById("textoNormal").scrollTop = 0;
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("textoNormal").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
id=1;
});
});
HTML
<textarea id="textoNormal"></textarea>
<input type="file" id="fileToLoad" />
<div class="clickMe">Click To Read Text File</div>

Categories