currently working on an administration panel, I want for the user a preview of the image that is about to send after adding a file with an html input element.
Currently the script works, but if you decide to choose a new file with the input again ( the div does not regenerate but duplicates with the new image, leaving the old one still visible.
So I would like the div and the preview to regenerate when we choose an image again with input.
But the question is, how can I do this ?
Thank you all very much in advance for your advice / solutions.
Hope I am understandable, I am a novice and I explain this in my words.
I also send you my greetings from France.
HTML
<div id="result">
<input type="file" id="image" accept="image/*" name="image"/>
Javascript
window.onload = function() {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("image");
filesInput.addEventListener("change", function(event) {
var files = event.target.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<div class=\"card\" style=\"max-width: 10rem;\"> <img class='card-img-top' src='" + picFile.result + "'" + "title='" + picFile.name + "'/> <div class=\"card-body rgba-black-light p-2\" style=\"text-align:center;\">Nouvelle image </div></div> ";
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
OUTPUT.innerHTML = ""
after the output declaration, this set the content of the div "result" to "" (empty)
If you want to regenerate image, you can remove the previous image.
I gave a id to div where image inside and remove it before where you added image.
Here is the snippet
window.onload = function() {
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("image");
filesInput.addEventListener("change", function(event) {
var files = event.target.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
var imageDiv = document.getElementById("imageDiv");//get div element
if(imageDiv!=null){//check div element
imageDiv.remove();}//remove the previous div
div.innerHTML = "<div class=\"card\" style=\"max-width: 10rem;\" id='imageDiv'> <img class='card-img-top' src='" + picFile.result + "'" + "title='" + picFile.name + "'/> <div class=\"card-body rgba-black-light p-2\" style=\"text-align:center;\">Nouvelle image </div></div> ";
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}})}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result">
<input type="file" id="image" accept="image/*" name="image"/>
Related
I'm working with python and flask to save my files, and to upload multiple images in js, with the preview and a delete button. When I click on the delete button, I want to delete a specific image. Currently, clicking on the delete button, deletes all.
This is the source code and I understand why the click deletes all.
let photo = document.getElementById('imgPhoto');
let file = document.getElementById('file-input');
photo.addEventListener('click', () => {
file.click();
});
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#file-input").on("change", function(e) {
var files = e.target.files, filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" + "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + "<br/><span class=\"remove\">Remover imagem</span>" +"</span>").insertAfter("#file-input");
$(".remove").click(function(){
$(this).parent(".pip").remove();
document.getElementById('file-input').value = "";
});
});
fileReader.readAsDataURL(f);
}
});
}
});
The result when uploaded
My project has multiple image upload space. I choose 4 pictures. I have selected one of the pictures removed when the file is not selected what is the reason?
<div class="aupload">
<img src="{{ url_for('static', filename='admin/images/upload.png') }}" class="uploadImage" alt="">
<input type="file" id="files" name="files[]" multiple />
</div>
<button type="submit" class="btn form-control btn-default">Kaydet</button>
<script>
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<div class=\"preview\">" +
"</span><img class=\"uploadImg\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<span class=\"remove\"><i class=\"fa fa-times\"></i>" +
"</div>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".preview").remove();
$('#files').val("");
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
What I want to do is: clicking the remove button will remove the uploaded photo and reduce the number of files selected. I'd appreciate it if you could help.
I am trying to upload images and before that show which files are invalid based on type and size. When i upload single file with size 5mb it works fine. But when i select multiple files including this 5mb picture my test fails, doesn't detect its size is more than 2. What do you see the problem is ?
JSFIDDLE DEMO
<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple>
<div id="img-wrapper"></div>
<hr>
<div id="invalid-images"></div>
<style type="text/css">
.invalid-img-thumbnail{
width: 100px;
height:100px;
border: 2px solid red;
}
.thumbnail{
width: 100px;
height:100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var valid_extensions = ["jpg", "jpeg", "png", "gif"];
$("#image-upload").change(function() {
var files = $(this)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = (function(name, event) {
var img = event.target.result; //image preview
var extension = name.split('.')[name.split('.').length - 1].toLowerCase(); //get file extension
if(valid_extensions.indexOf(extension)===-1 || file.size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb
$('#invalid-images').append(
"<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>");
}else{
$('#img-wrapper').append(
"<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>");
console.log('\n'+file.size);
}
}).bind(reader, file.name);
reader.readAsDataURL(file);
}
});
</script>
You need to add file.size to the function binding. Otherwise, when you use file.size in the callback function, it's referring to the last file in the loop.
$("#image-upload").change(function() {
var files = $(this)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = (function(name, size, event) {
var img = event.target.result; //image preview
var extension = name.split('.')[name.split('.').length - 1].toLowerCase(); //get file extension
if(valid_extensions.indexOf(extension)===-1 || size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb
$('#invalid-images').append(
"<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>");
}else{
$('#img-wrapper').append(
"<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>");
console.log('\n'+size);
}
}).bind(reader, file.name, file.size);
reader.readAsDataURL(file);
}
});
DEMO
I don't want to create a remove button; for each images which are previewed before they are going to be uploaded. The reason is because each image has a unique id, so that if it uses a remove button it will mess up the id arrangement when one of the images is removed.
I know this is a little complicated.
How to create a reset button for each images? So, when the user click the reset button, it will open the window of the user computer to pick the new image, and the id of the new picked image is still the same as before.
Here is my code:
var ftype = new Array(), count1 = 0;
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
var count = 0;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
count1++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img id='img_" + count1 + "' class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}
MY FIDDLE
So I have here my upload script and it has a function that the user can preview selected images before uploading but my problem is that every time I'll upload all images available for preview it is always the last file chosen.
Heres my code:
<script type="text/javascript">
$(document).ready(function(){
function readURL(input){
if(input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$(".form-holder").append("<img class='prev' />")
$(".prev").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#btn_up").change(function(){
readURL(this);
});
});
</script>
Try This Code
HTML
<input id="imgInput" type="file" name="file[]" multiple style="display:none;"/>
<input type="button" onclick="$('#imgInput').click();" value="Choose File" />
<output id="result" ></output>
<div style="margin-top:150px;" id="uploadedcontent"></div>
JS
var ftype = new Array();
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
var count = 0;
var count1 = 0;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}
$('body').on('click','.boxclose','',function(e){
var spanid = $(this).attr('id');
var splitval = spanid.split('_');
$('#div_' + splitval[1]).remove();
});
DEMO HERE