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"/>
Related
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();
});
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>
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;
}
I want to preview multiple images before upload. Secondly I want to remove/deselect the selected file if I choose wrong file. I am working on jquery code but it preview one image at a time. Also I want to select multiple images at a single time.
Here is the jquery code.
$(document).ready(function() {
//To add new input file field dynamically, on click of "Add More Files" button below function will be executed
$('#add_more').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),
$("<br/><br/>")
));
});
//following function will executes on change event of file input to select different file
$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() {
$(this).parent().parent().remove();
}));
}
});
//To preview image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name)
{
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
Here is the HTML code
<div id="formdiv">
<h2>Multiple Image Upload Form</h2>
<form enctype="multipart/form-data" action="" method="post">
First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
<hr/>
<div id="filediv"><input name="file[]" multiple type="file" id="file"/></div><br/>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<br/>
<br/>
<!-------Including PHP Script here------>
<?php include "upload.php"; ?>
</div>
maybe you can see this topic , I think it has what you need.
Create live preview of image (before upload it) using JQuery
also you can give a try with that
http://www.aspsnippets.com/Articles/Show-Display-image-preview-before-upload-using-jQuery.aspx
You can find examples on http://www.fyneworks.com/jquery/multifile/
Maybe you can extract the parts of their code to write your custom.
For images preview you can use the URL.createObjectURL javascript function . Example:
$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
var URL = window.URL || window.webkitURL;
var img = $('<img />').attr('src', URL.createObjectURL(this.files[0] ) );
}
});
If you need a full uploader you can also try this: http://www.albanx.com/ajaxuploader/ or other online examples
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()"/>