Basado en mi publicación anterior ¿Cómo puedo convertir una imagen en una cadena Base64 desde una fuente de imagen? Me gustaría configurar mi archivo de imagen para que tenga un límite de tamaño pero, sin embargo, no podría hacer que funcione si lo configuro con una condición.
aquí el código de abajo
function encodeImageFileAsURL() { var filesSelected = document.getElementById("inputFileToLoad").files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("output").src = newImage.src; alert("Converted Base64 version is " + document.getElementById("output").src); console.log("Converted Base64 version is " + document.getElementById("output").src); } fileReader.readAsDataURL(fileToLoad); } } var uploadField = document.getElementById("inputFileToLoad"); uploadField.onchange = function() { // 1000000 = 1MB if (this.files[0].size > 1000000) { alert("File is too big!"); this.value = ""; } else if (this.files[0].size < 100000) { alert("File not recommended size!"); this.value = ""; } }; $('#inputFileToLoad').change(function(event) { if(event.target.files[0]){ // var tmppath = URL.createObjectURL(event.target.files[0]); $("img#output").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0])); }else{ alert('Image size mismatched.') } // $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />Si tengo mi condición, mis datos de base 64 ya no se muestran, ¿cómo puedo solucionar este problema?
El código de la pregunta tiene tres controladores de eventos independientes para #inputFileToLoad onchange Hay uno declarado en el elemento en el HTML que llama a encodeImageFileAsURL() . Esto luego se sobrescribe en la línea 25 con uploadField.onchange = function() { evitando que se llame a encodeImageFileAsURL() . Luego se agrega un controlador de cambio adicional en la línea 36 con $('# onchange $('#inputFileToLoad').change(function(event) { .
Puede colocar toda esta lógica en un solo controlador de eventos para onchange . Esto le permite ordenar la lógica como desee, también puede regresar si hay un problema (por ejemplo, el tamaño del archivo es demasiado grande) que impide que se ejecute el código restante.
En el siguiente ejemplo tengo:
encodeImageFileAsURL(event) en HTML onchange="encodeImageFileAsURL(event);encodeImageFileAsURL , cambiando las referencias de this a event.target.El ejemplo está abajo,
function encodeImageFileAsURL(event) { // File Size Checks if (event.target.files[0].size > 1000000) { alert("File is too big!"); event.target.value = ""; return; } else if (event.target.files[0].size < 100000) { alert("File not recommended size!"); event.target.value = ""; return; } // Update image on page if (event.target.files[0]) { // var tmppath = URL.createObjectURL(event.target.files[0]); $("img#output").fadeIn("fast").attr('src', URL.createObjectURL(event.target.files[0])); } else { alert('Image size mismatched.') return; } // Base64 conversion var filesSelected = event.target.files; if (filesSelected.length > 0) { var fileToLoad = filesSelected[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var srcData = fileLoadedEvent.target.result; // <--- data: base64 var newImage = document.createElement('img'); newImage.src = srcData; document.getElementById("output").src = newImage.src; alert("Converted Base64 version is " + document.getElementById("output").src); console.log("Converted Base64 version is " + document.getElementById("output").src); } fileReader.readAsDataURL(fileToLoad); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL(event);" /> <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />