- $scope.EventImageUpload = function() {
- $images = $('.imageOutput')
- $(".imageUpload").change(function(event) {
- readURL(this);
- });
- $scope.listEventimage = [];
-
- function readURL(input) {
-
- $scope.imagedata = "";
- if (input.files && input.files[0]) {
- $.each(input.files, function() {
- var reader = new FileReader();
- reader.onload = function(e) {
- var fileSize = input.files[0].size;
- if (fileSize > 2000000) {
- $scope.imgupload = "";
- $scope.Photo = "";
- $('#toast-container04').css({
- "display": "block"
- });
- return false;
- }
- var canvas = document.createElement("canvas");
- var imageElement = document.createElement("img");
- imageElement.setAttribute('src', e.target.result);
- canvas.width = imageElement.width;
- canvas.height = imageElement.height;
- var context = canvas.getContext("2d");
- context.drawImage(imageElement, 0, 0);
- var base64Image = canvas.toDataURL("image/jpeg");
- var profile = base64Image.replace(/data:image\/jpeg;base64,/g, '');
- var url = input.value;
- var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
- if (ext == 'jpg') {
- ext = "jpeg";
- }
- var result = e.target.result.replace("data:image/" + ext + ";base64,", "");
- $scope.imgupload1 = result;
- $scope.imagedata = profile;
- var $el = $('<div style="float:left;padding-left:20px"><ul class="file-list" ><li class="file template-download fade in" style="width:104%"><img class="file-link" id="Clear" src="' + e.target.result + '" padding=15px width=150px height=150px/><button style="position:relative;width: 39%; margin-bottom: 4%;left: 30%;" class="file-delete-btn delete" id="dltbutton" data-ng-click = ClearImage("' + e.target.result + '") title="Delete">delete</button></li></ul></div>').appendTo('.imageOutput');
- $compile($el)($scope);
- $scope.listEventimage.push({
- Image: $scope.imagedata,
- ImageId: 0
- });
- }
- }
- $("#eventimage").show(); reader.readAsDataURL(this);
- });
- }
- }
Step 3
Next, add image display list. It is wise if possible to add multiple images at a time.
Step 4
If the user wishes to remove one image, click the "Delete" button, remove data from the database, and then once again load the image data.
After deleting the image, we call this method.
- $scope.listEventimage = [];
-
- angular.forEach(imagedata, function(a) {
- $scope.imagedata = database images.
- $scope.Imageid = database images id;
- var $el = $('<div style="float:left;padding-left:20px">' + '<td><img class="file-link" id="Clear" src="' + 'data:image/png;base64, ' + $scope.imagedata + '" padding=15px width=150px height=150px /><button style="position:relative;width: 39%; margin-bottom: 4%;left: 30%;" id="dltbutton" class="file-delete-btn delete" data-ng-click="DeleteCEventImage(' + $scope.Imageid + ')">delete</button></td>' + '</div>').appendTo('.imageOutput');
- $compile($el)($scope);
- $scope.listEventimage.push({
- Image: database images,
- ImageId: database images id
- });
- });
I hope this blog is helpful to you.
Hamid KhanPosted Sep 11, 2017, 12:37 PM
Could you please upload the source code.................
Nandhini SPosted Aug 10, 2017, 3:51 AM
Nice blog.... Keep it up.....