I need one help.I have one image icon, when user will select that icon the file dialog will open and user will select the image.After selecting the image the image should display on that image icon.I am explaining my code below.
<div class="image-upload">
<label for="bannerimage">
<img src="{{attachImage}}"/>
</label>
<input type="file" data-size="lg" name="bannerimage" id="bannerimage" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);" ngf-multiple="true">
</div>
my controller side code is given below.
$scope.attachImage="upload/logo.png";
$scope.uploadFile = function(event){
console.log('event',event.target.files);
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(file);
}
};
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
//var data={'image':e.target.result};
// $scope.stepsModel.push(data);
//$scope.myImage=e.target.result;
$scope.attachImage='';
$scope.attachImage=$scope.myImage;
});
});
Here i need when user will select the image the image will display on that particular image icon.Please help me.
I believe you need to use reader.onloadend instead of reader.onload
reader.onloadend = function () {
// set $scope.attachImage to reader.result;
}
Related
In my profile I insert a button to load a picture from pc, but I don't know how upgrade the default user's image with the new image selected by user. Then I would like change the text of button from carica to elima when in the src there is an image loaded by user.
function changeImage(){
var elem = document.getElementById("change_image_button");
//Se devo caricare l'immagine
if(elem.value=="Carica"){
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file,'UTF-8');
reader.onload = readerEvent => {
var content = readerEvent.target.result; //File da caricare
document.getElementById("profilePicture").src= content.src;
}
}
input.click();
elem.value = "Elimina";
}
while the html code is:
<!--<Profile picture>-->
<img id="profilePicture" src="images/profilo.png" style="height: 173px;width: 160px;margin-left: 20%;margin-top: 20px;">
<div id="infoLoginUtente">
<p><span>Cambia Immagine: </span>
<span>
<button onClick="changeImage();" id="change_image_button" value="Carica"> Carica</button>
<input id="file-input" type="file" name="name" style="display: none;" />
</span></p>
</div>
Cambia Immagine:
Carica
but when i try to put the image the result is:
Modify your input.onchange like this:
input.onchange = e => {
var file = e.target.files[0];
document.getElementById("profilePicture").src= URL.createObjectURL(file);
}
I have found a code on internet to upload multiple images. While you select the image, it will show the selected image just below as preview, now the problem is what if I selected the wrong image and I want to remove that particular image, also no more than 4 image should be allowed
hope you get what I want to say below is the code
<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>
and jquery for the code is
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
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(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
The file list of HTML5 file input is readonly. So it's not possible to remove a single file out from a multiple file selection.
It's perfectly fine to empty a file input by resetting the form. You just can't modify it. So if you use 4 seperate single file selections, it's a simple matter of clearing the one that's being removed by the user:
HTML:
<form>
<input type="file" name='images[]' class="gallery-photo-add" id='image1' />
<input type="file" name='images[]' class="gallery-photo-add" id='image2' />
<input type="file" name='images[]' class="gallery-photo-add" id='image3' />
<input type="file" name='images[]' class="gallery-photo-add" id='image4' />
</form>
<div class="gallery"></div>
JS:
$(function() {
// Multiple images preview in browser
var imagesPreview = function(placeToInsertImagePreview) {
// Empty preview so we can safely rebuild it
$(placeToInsertImagePreview).empty();
// Get all files
var elems = document.getElementsByClassName("gallery-photo-add");
// Loop through each file and append them to the preview if available
for (i = 0; i < elems.length; i++) {
if (elems[i].files.length != 0) {
var reader = new FileReader();
var id = $(elems[i]).attr('id');
reader.onload = (function(id) {
return function(e){
$($.parseHTML('<img>')).attr({
'src' : e.target.result,
'data-id' : id
}).appendTo(placeToInsertImagePreview);
}
})(id);
reader.readAsDataURL(elems[i].files[0]);
}
}
};
// Temporarely wrap a form element around the input to reset it
window.reset = function(e) {
e.wrap("<form>").closest('form').get(0).reset();
e.unwrap();
}
$('div.gallery').on('click', 'img', function() {
var id = $(this).attr("data-id");
reset($('#'+id));
$(this).remove();
});
$('.gallery-photo-add').on('change', function() {
imagesPreview('div.gallery');
});
});
You can test it here: https://jsfiddle.net/81nytqsc/2/
$('div.gallery').on('click','img',function(){
var files= $('#gallery-photo-add).get(0).files;
for(i=0;i<files.length;i++){
if(files[i]==$(this).attr('src')){
files= jQuery.grep(files, function(value) {
return value != files[i];
}
}
}
$(this).remove();
});
So the file input opens up fine and I can choose a file. I also now that the file upload works and that it binds a file. But the ng-change event is never triggered.
<img class="profile-pic" ng-click="addHeaderImage()" ng-src="{{applyform.UseProfilePic}}"/>
<input type="file" ng-change="uploadHeader()" style="display: none" id="headerinput" ngf-select ng-model="file" ngf-multiple="false"/>
$scope.addHeaderImage = function () {
document.getElementById("headerinput").click();
}
$scope.uploadHeader = function () {
//$scope.loading = true;
var file = document.getElementById("headerinput").files[0];
var reader = new FileReader();
console.log("TJAABAB");
reader.addEventListener("load",
function () {
//item.Image = reader.result;
console.log("UPLOAD");
console.log(reader.result);
$scope.$apply();
//$scope.updateQuoteHeader(item);
//$scope.loading = false;
},
false);
if (file) {
reader.readAsDataURL(file);
}
}
so the function upload header is never triggered when I choose a file. Why is that?
Instead of ng-change, try onchange:
<input type="file" onchange="angular.element(this).scope().uploadHeader()" style="display: none" id="headerinput" ngf-select ng-model="file" ngf-multiple="false"/>
I have an input like this:
<input type="file" multiple>
And I want to create a thumbnail from every image that gets selected in the input (if there are 5 images, create 5 thumbnails). I've seen a lot of implementations, but none with a multiple field.
Any help would be appreciated. Thanks.
In the .change event for the input, you can loop through each of the files, and just append it to a div or whatever you want.
Working Example
$('input[type="file"]').on('change', function() {
for (var i = 0; i < this.files.length; i++) {
var fr = new FileReader();
fr.onload = function(e) {
$('#thumbs').append('<img src="' + e.target.result + '" width="50px" height="50px">')
}
fr.readAsDataURL(this.files[i]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple>
<div id="thumbs">
</div>
You can preview multiple files like following.
$('input[type="file"]').change(function() {
$('.thumbnail').html('');
$.each(this.files, function() {
readURL(this);
})
});
function readURL(file) {
var reader = new FileReader();
reader.onload = function(e) {
$('.thumbnail').append('<img src=' + e.target.result + ' style="width: 100px; height: 120px;"/>');
}
reader.readAsDataURL(file);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple/>
<div class="thumbnail"></div>
How to get image instead of image name in html using file input type. I have used the css file for positioning the image file. I have tried all the sorts of code given... Please help.
<input type="file" name="photo" id="photo" onchange="readURL()"/>
function readURL()
{
document.getElementById('previewimage').style.display='block';
}
function readURL()
{
if (document.getElementById('photo').files && document.getElementById('photo').files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('previewimage').src = e.target.result;
};
reader.readAsDataURL(document.getElementById('photo').files[0]);
}
}
function openFiledialog(){
document.getElementById('photo').click();
}
//
<input type='button' onclick='openFiledialog()' value='photo'/>
<input type="file" style='display:none;' name="photo" id="photo" onchange="readURL()"/>