así que creé un formulario que muestra una vista previa de la imagen antes de cargarla, a continuación se muestra cómo la creé
<div class="w-full mt-1 ml-2"> <div class="w-full flex left_flex gap-3"> <div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200"> <span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span> <img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo"> </div> <button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button> <span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span> </div> <input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)"> </div>y mi función user__photo es:
const user__photo = (event) => { document.getElementById('dummy_img').classList.add('hidden'); var display = document.getElementById('display_photo'); display.classList.remove('hidden') display.src = URL.createObjectURL(event.target.files[0]); display.onload = function() { URL.revokeObjectURL(display.src) } }pero la consola dice user__photo no es una función...
¿puede alguien decirme por que?
Cambie const user__photo = (event) => { a function user__photo (event) {
Está funcionando aquí: https://jsbin.com/mamodafibe/2/edit
function user__photo (event) { console.log('file changed') console.log(event) } <div class="w-full mt-1 ml-2"> <div class="w-full flex left_flex gap-3"> <div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200"> <span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span> <img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo"> </div> <button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button> <span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span> </div> <input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)"> </div> const user__photo = (event) => { alert('file changed') } <div class="w-full mt-1 ml-2"> <div class="w-full flex left_flex gap-3"> <div class="overflow-hidden w-10 h-10 shrink-0 rounded-full center_flex bg-gray-100 shadow-sm ring-1 ring-slate-200"> <span class="material-symbols-outlined text-slate-300" id="dummy_img">account_circle</span> <img src="" alt="" class="w-full h-full object-cover hidden" id="display_photo"> </div> <button type="button" id="choose_photo" class="p-1 shrink-0 hover:bg-green2 hover:text-blue-text rounded ring-1 text-sm ring-slate-300 hover:ring-green2">Choose photo</button> <span class="text-sm max-w-[20rem] Oneline" id="display_filename"></span> </div> <input type="file" accept="image/*" name="user__photo" id="user__photo" class="hidden" onchange="user__photo(event)"> </div>