Closed rezziqbal06 closed 4 years ago
I tried to change image from input to crop it. and it worked to change the cropping image by using method 'destroy', but when i submit it, the AJAX uploaded the second image twice. this is the code:
$('#iifoto').on( 'change', function(){ | if (this.files && this.files[0]) { | if (this.files[0].type.match(filterType)) { | var reader = new FileReader(); | reader.onload = function(evt) { | var img = new Image(); | img.onload = function() { | context.canvas.height = img.height; | context.canvas.width = img.width; | context.drawImage(img, 0, 0); | $('input[type="file"]').val(''); | canvas.cropper('destroy'); | canvas.cropper('replace',function(){ | url:img | }); | | } | img.src = evt.target.result; | $("#falampiran").on("submit",function(dt){ | dt.preventDefault(); | canvas.cropper('getCroppedCanvas').toBlob(function(blob){ | NProgress.start(); | var judul = $("#iijudul").val(); | var fd = new FormData(); | console.log(blob); | fd.append('foto', blob); | fd.append('judul', judul); | | $.ajax({ | url: url, | type: "POST", | data: fd, | contentType: false, | cache: false, | processData:false, | success: function(data){ | NProgress.done(); | if(data.status == '100' || data.status == 100){ | setTimeout(function(){ | $("#modal-tambah-lampiran").modal("hide"); | //window.location.reload(); | },2000); | }else{ | } | }, | error: function(data){ | NProgress.done(); | } | }); | }); | }); | }; | reader.readAsDataURL(this.files[0]); | } | else { | alert("Invalid file type! Please select an image file."); | } | } | else { | alert('No file(s) selected.'); | } | }); i think it's my bad, but what should i do?
I tried to change image from input to crop it. and it worked to change the cropping image by using method 'destroy', but when i submit it, the AJAX uploaded the second image twice. this is the code:
$('#iifoto').on( 'change', function(){ | if (this.files && this.files[0]) { | if (this.files[0].type.match(filterType)) { | var reader = new FileReader(); | reader.onload = function(evt) { | var img = new Image(); | img.onload = function() { | context.canvas.height = img.height; | context.canvas.width = img.width; | context.drawImage(img, 0, 0); | $('input[type="file"]').val(''); | canvas.cropper('destroy'); | canvas.cropper('replace',function(){ | url:img | }); | | } | img.src = evt.target.result; | $("#falampiran").on("submit",function(dt){ | dt.preventDefault(); | canvas.cropper('getCroppedCanvas').toBlob(function(blob){ | NProgress.start(); | var judul = $("#iijudul").val(); | var fd = new FormData(); | console.log(blob); | fd.append('foto', blob); | fd.append('judul', judul); | | $.ajax({ | url: url, | type: "POST", | data: fd, | contentType: false, | cache: false, | processData:false, | success: function(data){ | NProgress.done(); | if(data.status == '100' || data.status == 100){ | setTimeout(function(){ | $("#modal-tambah-lampiran").modal("hide"); | //window.location.reload(); | },2000); | }else{ | } | }, | error: function(data){ | NProgress.done(); | } | }); | }); | }); | }; | reader.readAsDataURL(this.files[0]); | } | else { | alert("Invalid file type! Please select an image file."); | } | } | else { | alert('No file(s) selected.'); | } | }); i think it's my bad, but what should i do?