description preview of uploaded images - javascript

I would like to add to the preview of uploaded images before uploading to the server the option to add a description of the image, which will be saved in the database, below the script displaying images and a preview image. Is anyone able to help me ?
$(function() {
// Multiple images preview with JavaScript
var multiImgPreview = function(input, imgPreviewPlaceholder) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#chooseFile').on('change', function() {
multiImgPreview(this, 'div.imgGallery');
});
});
enter image description here

Related

Summernote rich text editor-restrict image above particular height and width

When I upload image in editor, I am able to find it's size.
But I want it's height and width to restrict for height and width above particular limit.
Below is result which I'm getting when I upload image.
See image to image upload result
For size restriction it's working as below-
onImageUpload(images, insertImage) {
if (images[0].size <= 100000) {
for (let i = 0; i < images.length; i++) {
const reader = new FileReader();
reader.onloadend = () => {
insertImage(reader.result);
};
reader.readAsDataURL(images[i]);
}
} else {
alert('Image not saved, max allowed image size is 100kb');
}
};
What editor are you using? UEditor is a very good rich-text editor.
onImageUpload(images, insertImage) {
console.log('onImageUpload', images);
if (images[0].size <= 100000) {
for (let i = 0; i < images.length; i++) {
const reader = new FileReader();
reader.onloadend = () => {
var i = new Image();
i.src = reader.result;
i.onload = function () {
if (i.width <= 200 && i.height <= 200) {
insertImage(reader.result);
} else {
cogoToast.warn('Image not saved, image width and height should be less than 200*200');
}
};
};
reader.readAsDataURL(images[i]);
}
} else {
cogoToast.warn('Image not saved, max allowed image size is 100kb');
}
};
It will work in this way.Thanks!

How to add delete icon to appended images

I append images to my div with this code:
$(function() {
var imagesPreview = function(input, placetoinsert) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
if (i>=5) {
break;
}
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo('.preview').addClass('added_images');
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
Images I get from input file field in my view. And now I want append for each image another image like "delete". How can I do that?My div now is empty:
<div class="preview">
</div>
I would simply create the html needed and just use something like this:
$($.parseHTML('<div class="someClass">close</div>')).appendTo('.preview');
And then just listen for
$('.someClass').click(function(){
// do stuff
});

Uploading image and displaying it small with javascript

So, I've got this working javascript and it loads an image that a user uploads to the HTML on the screen displaying it.
But, it displays the image without a max height or width so it moves buttons on the page to where they can't be seen or pressed. This includes the submit button if the image uploaded is big enough.
So, is there some way to make the 'uploaded' image display really small: like max 30px in height?
$(function(){
$('#user_avatar').change(function(e){
var files = event.target.files;
var image = files[0];
for (var i = files.length - 1; i >= 0; i--) {
var reader = new FileReader();
var file = files[i];
reader.onload = function(file) {
var img = new Image();
img.src = file.target.result;
$('#inputpic').attr('src', file.target.result);
}
reader.readAsDataURL(image);
};
});
});
I have tried adding:
theimage = getElementById('inputpic')
theimage.style.height='10px';
But this had no effect.
EDIT 1
html.slim that the JS talks to:
= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')
SCSS that I made:
.tiny-image-display {
max-height: 30px;
}
You can set this in CSS very easily:
#inputpic {
max-height: 30px;
}
$(function(){
$('#user_avatar').change(function(e){
var files = event.target.files;
var image = files[0];
for (var i = files.length - 1; i >= 0; i--) {
var reader = new FileReader();
var file = files[i];
reader.onload = function(file) {
var img = new Image();
img.src = file.target.result;
img.height = "30";
$('#inputpic').attr('src', file.target.result);
}
reader.readAsDataURL(image);
};
});
});

using HTML5 File API with elevate zoom jquery plugin

I'm trying to use elevate zoom jquery plugin on an image created with the file api right off the user's computer. However it doesn't seem to work! It's as if elevate zoom doesn't recognize the "src" of the image.
Any ideas?
Thanks a lot!
Here's my JS:
$("#testing").change(function(e) {
var file, i, image_width, img, reader, _results;
i = 0;
image_width = void 0;
_results = [];
while (i < e.originalEvent.srcElement.files.length) {
file = e.originalEvent.srcElement.files[i];
img = document.createElement("img");
img.id = "draggable";
reader = new FileReader();
reader.onloadend = function() {
var image_h, image_w;
img.src = reader.result;
};
reader.readAsDataURL(file);
$("#preview_images").after(img);
_results.push(i++);
}
return _results;
});
$(function() {
$("img").elevateZoom({
zoomType: "inner"
});
return {
cursor: "crosshair"
};
});
Here's my HTML:
<img src="data:image/jpeg;base64,/{HUGE LINES OF CODE HERE}">
reader.result is base64 string of image,so try this
reader.onloadend = function() {
var image_h, image_w;
img.src = 'data:image/png;base64,'+reader.result;
};

How to show a 'X' mark on a image preview

I've this upload image preview code:
function readURL(input) {
$.each(input.files,function(i) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#preview_drop');
var image = $('<img>').attr('src', e.target.result).attr('id', 'preimg')
image.appendTo(container);
$("#add_photoajax").mCustomScrollbar("update");
};
reader.readAsDataURL(input.files[i]);
});
}
How can i show a 'x' mark or a delete.png on each previewed image?
'''
var container = $('#preview_drop');
//Create it first
var x = $('<img>').attr('src', 'delete.png');
var image = $('<img>').attr('src', e.target.result).attr('id', 'preimg')
image.appendTo(container);
//and then append it after/before img
x.appendTo(container);
$("#add_photoajax").mCustomScrollbar("update");
...

Categories

Resources