on my webpage an user can upload a image with an input like this:
<input ID="submitBackground" class="imageUploader" type='file'/>
The image shall be saved to my server to C:/TEMP immediately.
I try to get access to the uploaded file, I am so far:
var input = document.getElementById('submitBackground');
$("#submitBackground").change(function() {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
// Something (a stream?) is written in e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
});
I just don't know how to continue, I need to save it local somehow.
Has anyone an idea how to do it?
I have a solution now. I am using this example: http://howtodoinjava.com/2013/05/22/jax-rs-resteasy-file-upload-html-form-example/
Works fine, now saving local is possible.
Related
I'm trying to get the base64 content from a local audio on my device using javascript.
I'm using the following code:
var file = new File(["file_name.mp4"], "/data/user/files/VoiceRecordingPluginData/file_name.mp4");
var reader = new FileReader();
// Read file content on file loaded event
reader.onloadend = function (event) {
console.log(reader.result);
};
// Convert data to base64
reader.readAsDataURL(file);
As result, "file" gets populated like this:
file.name: ["file_name.mp4"]
file.localURL: "/data/user/files/VoiceRecordingPluginData/file_name.mp4"
Once "onloaded" is reached, "reader.result" is empty.
Any hints on what's wrong in my code?
I want to make a multiple images upload system with prograss bar. I want to do with simaple code(using jquery or js). I want when user has upload his images on browser and i want to show on browser that images and with upload button he starts uploading image via ajax in his folder.
So questions
1.) Is it possible to show uploaded image (without any complicated code) ?
2.) Do i get a variable or array where uploaded images are stored as base64 code (data:/img:dfd5d/d54fs..... something like this) or encoded?
3.) How do i add progressBar ?
I didn't write any code yet because i dont know how to start. I am new in computer science.
But i find this code on this site
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
This is easy code and i understand but one thing is not clear what does mean this line var reader = new FileReader(); why use new and what is it ?
Ty in advance and please dont explain complicate and i am not very good in english. So please try to explain in poor words if possible..
Assuming that you have this field
<input type="file" onchange="showImage(this)"/>
you can create a script to take the binary data and show it
function showImage(input){
var reader = new FileReader();
// validating...
var fileType = input.files[0].type;
var filesize = input.files[0].size;
// filetype (this will validate mimetype, only png, jpeg, jpg allowed)
var fileTypes = ["image/png", "image/jpeg", "image/gif"];
if (fileTypes.indexOf(fileType) < 0){
// return error, invalid mimetype
return false;
}
// file cannot be more than 500kb
if (filesize > 5000000) {
// return error, image too big
return false;
}
reader.onload = function (e) {
// e will contain the image info
jQuery('#myimagetopreview').attr('src', e.target.result)
}
reader.readAsDataURL(input.files[0]);
}
This should work, if you have problem tell me
edit: FileReader is not supported by all the browsers, check the documentation for more https://developer.mozilla.org/en/docs/Web/API/FileReader
The FileReader in JS has Status "Working Draft" and isn't part of the official JS API. I think you have to wait until the Browsers support this ne API or you have to activate experimental JS API in the Browser.
Newbie to the HTML5 file upload capability, and finding I cant get a simple xml file uploaded and able to get file contents into console. The expected behaviour is that I'd select an xml file and then see the contents rendered in console. However, I dont ever get to the console.log step - seems the reader never loads? Any suggestions to resolve would be most appreciated.
<input type="file"></input>
<script>
var upload = document.getElementsByTagName('input')[0];
upload.onchange = function (e) {
e.preventDefault();
var file = upload.files[0], reader = new FileReader();
reader.onload = function (event) {
console.log('evt',reader.readAsText(file));
};
return false;
};
</script>
So you're setting the reader.onload event to a function, but you need to call the reader.readAsText() function outside of this.
So for example change your code to:
reader.onload = function(event) {
console.log(event);
};
reader.readAsText(file);
What this does is to tell the reader that when you call reader.readAsText(file) it should run the function you defined with reader.onload.
What you were doing before would never load the file because you were only telling the reader to readAsText inside your function callback that you told it to run when it was already loaded!
I have a page use fileReader to preview the upload image.
I have test in my local machine, it works fine, but when I test in JS fiddle, it is not working. anyone know where is the problem?
if(window.FileReader){
function preview(input){
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function(e){$('#previewImage').attr('src', e.target.result);}
}
}
}else{alert("file reader not support");}
here is fiddle http://jsfiddle.net/s39P3/93/
If you have the console open you will see the error is that the 'preview' function isn't found, because it isn't part of the scope. I added it to the window scope so window.preview = function() and now it works.
http://jsfiddle.net/s39P3/93/
UPDATE:
For testing purposes, I used
<input type="text" onClick="doProcess(http://www.abc.com/chart.png)" />
That didn't work (used alert to test if url was being passed. The alert box did show up with the url, but decoding failed). In a sense, I answered a part of my question myself. Any ideas on how to read an image file through javascript?tt
Just found that this is HTML 5 related code. Also I figured since I'm passing a url instead of list of files, I'll need to remove the for() loop from the doProcess() function which would be
function doProcess(f)
{
var o=[];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f);
reader.readAsDataURL(f);
}
But this doesn't work too :(
ORIGINAL POST
I have an input file to which a QR image file is supplied with.
<input type="file" onchange="doProcess(this.files)">
doProcess function
function doProcess(f)
{
var o=[];
for(var i =0;i<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
This function works perfectly. No problems there. The purpose of this function is to decode a QR image. Now out of sheer interest and curiosity, I'm planning to do something different - remove the need to browse to the image file manually. This brings me to a few queries:
Is it possible for doProcess(f) to perform the same actions when supplied with an image URL instead of a file? At present f parameter is a file. What will happen if f parameter is a URL (for ex: doProcess(http://www.abc.com/abc.jpg))? I realize there are other support functions inside doProcess() also being called to complete the decoding process but I'm assuming those will act accordingly to the type of data being passed through doProcess.
If f parameter is an image file (browsed on local computer and selected) instead of image URL, what data type will f be? I'm guessing it will be an array or in some raw binary form.
My intention is to study the process and know what exactly is happening behind the scenes. By using the 'browse' function, the QR image is being decoded successfully.
In summary, what will happen if I pass the location of the image stored as the argument instead of a file?
Thanks in advance.
There is some problems that I don't know you have or not in here because it's not your full code and I don't know what exactly you are trying to do. Here a working example of something very close of what you are doing. It loads a image on a canvas (you could use your qrcode stuff instead)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var gCanvas;
var gCtx;
function load(){
console.log("loaded");
gCanvas = document.getElementById("mcanvas");
if (gCanvas.getContext){
gCtx = gCanvas.getContext("2d");
} else console.log("no Canvas?");
}
function doProcess(f){
var o=[];
var reader = new FileReader();
reader.onload = (function(theFile) {
var img = new Image();
img.src = theFile;
img.onload = function(){
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
gCtx.drawImage(img,0,0);
}
return;
})(f);
console.log(reader);
reader.readAsDataURL(f);
}
</script>
</head>
<body onload="load()">
<input type="text" onClick="doProcess('https://www.google.com.br/logos/2012/clara_schuman-2012-hp.jpg')" />
<canvas id="mcanvas" height="500" width="500"></canvas>
</body>
</html>
dont't forget the load function, it grants your javascript to run after body loads.