We Keep Coding

Loop image convertion to base64 based on how many images are uploaded in file upload

How can I loop this image convertion to base64 based on how many images are uploaded in file upload?
This script I am using, I want it to be looped based on how many images that are selected in the file upload:
<input id="inp" type='file' multiple>
<p id="b64"></p>
<img id="img" height="150">
<script>
document.getElementById("inp").addEventListener("change", readFile);
function readFile() {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
});
FR.readAsDataURL(this.files[0]);
}
</script>
Thank you!

<script>
var bs64Array = [];
document.getElementById("inp").addEventListener("change", readFile);
function readFile() {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
var image = document.createElement('img')
image.src = e.target.result;
document.getElementById("b64").appendChild(image);
bs64Array.push(e.target.result)
});
FR.readAsDataURL(this.files[0]);
}
</script>

unable to POST data after reading file uploaded by user on a web page

I am trying to read an uploaded file via JS and then publish its content on to another page using the POST method
HTML file:
<div class="sm2 ">
<label for="file" class="control-label">Upload</label>
<input type="file" name="myfile" multiple="multiple" id="myfile">
</div>
Java Script:
var $i = $('#myfile');
input = $i[0];
if ( input.files && input.files[0] ) {
myfile = input.files[0];
fr = new FileReader();
fr.onload = function() { alert(fr.result); };
fr.readAsText( myfile );
}
else {
alert("File not selected")
}
$.post("/dc/ajax",
{
action: "load_mob1",
data:fr.result
contentType: false,
},
I think the POST method is called before the file is read. How do i wait for the file to be read before POST is being called?
Thanks in advance for your help.

Try putting the post method inside the fr.onload method where you have the result alerting.

As fr.readAsText is asynchronous, you need to wait for fr.onload to complete before fr.result has any content
var $i = $('#myfile');
input = $i[0];
if (input.files && input.files[0]) {
myfile = input.files[0];
fr = new FileReader();
fr.onload = function() {
$.post("/dc/ajax", {
action: "load_mob1",
data: fr.result
contentType: false,
});
fr.readAsText(myfile);
};
} else {
alert("File not selected")
}
This also prevents what would happen now, the $.post would be run even when no file was selected

Upload base64 image to .NET webservice and convert it there

I have a function that sends data through data:JSON.stringify(formdata)using POST to a remove .NET webservice. I have no problem this far. What I want to do it to add also add a another value to the formdata JSON that will hold a base64 image data and send it to the server, and there I will convert it back to a JPEG image.
How can I so that? I already have a preview function that created a preview, but also create a base64 image:
function previewFile() {
var preview = document.querySelector('.uploadimage');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
I see many question people asking how to upload image to the server. I want to stay with the current configuration but just pass the base64 image data to the server as a string. I see many developers struggling with that, and most of them just engine up creating a form in javascript and submitting like that.

Here is a recent way I did this:
string base64 = base64string.Substring(base64string.IndexOf(',') + 1);
byte[] imageData = Convert.FromBase64String(base64);
Image img;
using (var ms = new MemoryStream(imageData, 0, imageData.Length)) {
img = Image.FromStream(ms, true);
You will need:
using System.Drawing;
OR to simply convert to a jpg, use this:
File.WriteAllBytes("image.jpeg", Convert.FromBase64String(base64));
For sending the data I use the following JS:
function sendImage() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.onload = function (e) {
$("#imgImage").attr("src", e.target.result); //show a preview
//send e.target.result as a string to your webservice
};
FR.readAsDataURL(this.files[0]);
}
}
I use this event to listen for uploaded files:
document.getElementById("fileid").addEventListener("change", sendImage, false);
And the front end:
<input type="file" id="fileid" />

jQuery image preview before upload script

jQuery image preview before upload script does not work when called on multiple items in the same page. I changed the id's on the script so that it can apply to the respective image but it does not work as intended.
I made a JSFiddle:
http://jsfiddle.net/LvsYc/6977/
The Code for it:
<form id="form1">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image1" />
</form>
<form id="form2">
<input type='file' id="imgInp2" />
<img id="blah2" src="#" alt="your image2" />
</form>
jQuery:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp2").change(function(){
readURL(this);
});

all you need to do is change the second function readURL to a different name as readURL2
Solved Fiddle here
It worked for me.
function readURL2(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp2").change(function(){
readURL2(this);
});
good luck

Using FileReader() to read an image from HTML form

I am trying to use the readAsDataURL function for a javascript FileReader in order to retrieve data from an html form to upload it into a database. I currently have a file Object from the form but cannot get it into a form to put into a database.
HTML
input type="file" style="width: 300px" id="costumePicUpload" multiple
button type="submit" onclick="submitForm()">SUBMIT</button
JavaScript
function submitForm(){
var file = document.getElementById("costumePicUpload").files[0];
var reader = new FileReader();
var img;
reader.onloadend = function(e) {
img = new Image();
img.src = e.target.result;
if(e.target.error){
alert(e.target.error.code);
}
};
reader.readAsDataURL(file);
};
}
When I output the link in an alert it just says undefined. Does anyone know how I can fix this?
UPDATE
I was able to get a FileError.NOT_READABLE_ERR but have no idea what could be causing this.

I faced the same problem here is code
Html code
<input type="file" name="costumePicUpload" id="costumePicUpload" onChange="viewImage(this)" >
<img src="#" id="imageThumb">
Javascript Function
function viewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imageThumb').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
When we choose the image file to upload it will read image using file reader and set it as a source for another image with id "imageThumb".