i/m doing delete image when the client upload multiple image and preview that image. here is my html
<div class="form-group">
<input id="image" class="" name="image[]" type="file" multiple />
<div class="preview clearfix">
</div>
<div class="upload-img">
<label for="image">
<u>Upload</u>
</label>
</div>
</div>
and here is my JS to upload image and preview images
$("#image").change(function(){
var total_file = document.getElementById('image').files.length;
for(var i = 0; i < total_file ; i++){
var html =
"<div class='img pull-left'>"
+"<img class='preview-img' data-id='"+i+"' id='preview-img-"+i+"' src='"+URL.createObjectURL(event.target.files[i])+"'>"
+"<img class='delete-img' image-id='#preview-img-"+i+"' src='{{ url('/media/error.svg')}}'>"
+'</div>';
$('.preview').append(html);
};
});
$(document).on('click', '.delete-img', function() {
var img = $(this).attr('image-id');
var id_img = $(img).attr('data-id');
var total_files = document.getElementById('image').files;
$(this).closest('.img').remove();
delete total_files[id_img];
});
my problem is delete image in UI but do not delete element image. I want to delete both DOM HTML and file exist in
Related
I am a Java Script beginner and would like to pass the id of an image to an HTML file. When I click on a link I want to get to a page (annotator) with the image.
This is the Js part:
link = changeIIIFInformation(iiif, 10, "default")
var figure = document.createElement('figure')
var figcaption = document.createElement('figcaption')
var linkToImage = document.createElement('a')
linkToImage.setAttribute('href', 'annotator')
linkToImage.innerHTML = label;
figcaption.appendChild(linkToImage);
var image = document.createElement('img');
image.setAttribute('src', link);
figure.appendChild(image)
figure.appendChild(figcaption)
div.appendChild(figure)
count += 1;
if (count >= max_num + offset) {
break;
}
And this is the HTML Code:
<div class="container-fluid">
<div class="row">
<div class="col-md-6" role="main">
Tablet:
<select id="images" onchange="loadVariants()"></select>
Side:
<select id="imageside" onchange="reinit(null)"></select>
<button id="saveAnnotations" onclick="saveTextAsFile(JSON.stringify(curanno),'json','anno')">Save Annotations</button>
<button id="saveInGit" onclick="commitData()">Save Annotation in Gitlab</button>
<button id="showTransliteration" onClick='document.getElementById("transliterationdialog").show();'>Show Transliteration</button>
<button id="showTranslation" onClick='document.getElementById("translationdialog").show();'>Show Translation</button>
<button id="showPaleoCode" onClick='document.getElementById("paleocodedialog").show();'>Show PaleoCodes</button>
<button id="showIndexedChars" onClick="highlightIndexedChars()">Highlight Indexed Chars</button>
<button onclick="showHideAnno()">Show/Hide Annotations</button>
<br/>
Tagsets: CharacterSet: <input type="radio" id="characterset">
LinguisticAnnotation: <input type="radio" id="linguisticset" />
</div>
</div>
</div>
I am uploading multiple images and showing preview, it is working fine. When I want to delete a particular preview image the preview image is deleted but when I upload all the files are uploading. Please check.
My form:
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5">
Upload a file(.csv,.xls,.xlsx)
</div>
<div class="col-sm-12 col-md-6 col-lg-7">
<input type="file" class="form-control" id="gallery-photo-add" name="projectfile[]" multiple>
<div class="gallery">
</div>
</div>
</div>
</div>
Javascript
$(function() {
var imageArray = [];
var imagesPreview = function(input, placeToInsertImagePreview) {
var data = '';
if (input.files) {
var filesAmount = input.files.length;
for (let i = 0; i < filesAmount; i++) {
data +='<li>'+ input.files[i].name + '</li>';
var reader = new FileReader();
reader.onload = function(event) {
var image = '<a class="delete" data-value='+ i +'><img class="images" src='+ event.target.result +'><i class="fas fa-times closeicon" aria-hidden="true"></i> </a>';
$($.parseHTML(image))
.appendTo(placeToInsertImagePreview);
}
// console.log(input.files);
reader.readAsDataURL(input.files[i]);
imageArray.push(input.files[i]);
console.log(imageArray);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
$("div.gallery").on('click','.delete',function(){
// console.log($(this).data("value"));
$(this).remove();
imageArray.splice($(this).data("value"),1);
console.log(imageArray);
});
});
Multiple input type file return a read-only fileList. It contains a collection of File objects. Therefore u can't simply remove an element from this list.
You have to use AJAX to handling the Form. Referthis question.
I made a code in the img box in sequence. However, if the if (file.size > 1M) is large, a space occurs in the img box.
How do I get the next image to come in without spaces?
**
javascript preview image before upload
**
<form class="my_form">
<input type="file" id="fileElem" multiple accept="image/*"
onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select Images</label>
<div id="gallery">
<img id="**imgg0**" class="imgg">
<img id="**imgg1**" class="imgg">
<img id="**imgg2**" class="imgg">
<img id="**imgg3**" class="imgg">
<img id="**imgg4**" class="imgg">
</div>
</form>
<script>
function handleFiles(files) {
var files = [...files]
var imgs = document.querySelectorAll('img');
files.forEach(function(file, index){
if(file.size > 1000000){
delete file[index];
} else{
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
var img = **document.getElementById('imgg'+index)**;
img.src = reader.result;
}
}
})
}
</script>
[enter image description here][1]
[1]: https://i.stack.imgur.com/0dJ45.png
Check my solution.
function handleFiles(files) {
var imgs = document.querySelectorAll('img');
//Image element undex
let imgIndex=0;
//Loop through all the images
for(var i = 0; i < files.length; i++){
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById('imgg'+imgIndex);
img.src = e.target.result;
imgIndex++;
}
reader.readAsDataURL(files[i]);
}
}
<form class="my_form">
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select Images</label>
<div id="gallery">
<img id="imgg0" width="10%" class="imgg">
<img id="imgg1" width="10%" class="imgg">
<img id="imgg2" width="10%" class="imgg">
<img id="imgg3" width="10%" class="imgg">
<img id="imgg4" width="10%" class="imgg">
</div>
</form>
a simple solution for multi-image previews. This creates img placeholders dynamically for as many pictures selected in file control
<div id="container01"></div>
<input id="filer" type="file" onchange="preview()" multiple="multiple" />
<script>
function preview() {
var element = document.getElementById("container01");
for (var i = 0; i < event.target.files.length; i++) {
var imgi = document.createElement('img'); // variable imgi has i loop counter
imgi.src = URL.createObjectURL(event.target.files[i]);
imgi.style.width = "100px";
imgi.style.height = "100px";
element.appendChild(imgi); // add new preview to container
var space = document.createTextNode(" "); // spacer between imgs
element.appendChild(space); // add space for horizontal preview
// var linebreak = document.createElement('br'); // add line break <br/>
// element.appendChild(linebreak);
}
}
</script>
I have an html select option for uploading images.
<div class="row smallMargin">
<div class="col-sm-6">
Attach Image
</div>
<div class="col-sm-6">
<input type="file" ng-model="image" accept="image/*">
</div>
</div>
How can I restrict the user from uploading images which are larger than 2MB?
This example should give you an idea of how to do it:
HTML
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
JS
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more than ' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct - '+fileSize+' bytes');
}
}else{
alert('Please select the file to upload');
return false;
}
});
});
I want to show multiple files or images after browse from system not uploaded on server can we show this using jquery?
I goggled it and find there is way to show and upload on server:
http://www.dropzonejs.com/
But. I only want to show images or file in this there is drag and drop functionality also present can we use this plugin.
But, when I use this plugin in fiddle it show only attached file name not display image why?
Here is fiddle:
http://jsfiddle.net/my50a3uh/1/
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
<input type="file" name="file" />
I hope it may be useful for you.It is running well.
Live Working Demo
HTML Code:
<form enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select Files to Upload</label><br />
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
<output id="filesInfo"></output>
</div>
<div class="row">
<input type="submit" value="Upload" />
</div>
</form>
JS Code
function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;
var result = '';
var file;
for (var i = 0; file = files[i]; i++) {
// if the file is not an image, continue
if (!file.type.match('image.*')) {
continue;
}
reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
var div = document.createElement('div');
div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
document.getElementById('filesInfo').appendChild(div);
};
}(file));
reader.readAsDataURL(file);
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);