var formData = new FormData(); function ValidateRequiredfields() { var reqField = "reg_back_id,reg_front_id,"; if (ValidRequiredFieldWithDoc(reqField) === false) { return false; } else { SavePhotoFromAjaxCall(); return true } } $(document).ready(function () { $("#" + mId + "reg_front_id").on("change", function (event) { compress(event); }); $("#" + mId + "reg_back_id").on("change", function (event) { compress(event); }); }); function SavePhotoFromAjaxCall() { formData.append("MethodName", "SavePhotoFromAjaxCall"); $.ajax({ url: "", type: "post", data: formData, dataType:"json", contentType: false, // Not to set any content header processData: false, // Not to process data success: function (response) { if (response.ErrorCode == "1") { alert(response.Msg); return false; } else { debugger alert(response.Msg); $(location).attr("href", "Manage.aspx"); return true; } }, error: function (error) { alert("Something went wrong!!!"); return false; } }); } function compress(e) { const width = 300; const height = 400; const fileName = e.target.files[0].name; const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.onload = event => { const img = new Image(); img.src = event.target.result; img.onload = () => { const elem = document.createElement('canvas'); elem.width = width; elem.height = height; const ctx = elem.getContext('2d'); // img.width and img.height will contain the original dimensions ctx.drawImage(img, 0, 0, width, height); ctx.canvas.toBlob((blob) => { const file = new File([blob], fileName, { type: 'image/jpeg', lastModified: Date.now() }); formData.append(file.fileName, file); }, 'image/jpeg', 1); }, reader.onerror = error => console.log(error); }; }