Mira el código HTML a continuación:
<div class="user-avatar-wrapper"> <img class="profile-pic" src="/placeholder.png" alt="" /> <div class="upload-button"></div> <input class="file-upload" type="file" accept="image/*"/> </div> Ahora quiero activar la carga del archivo y llamar a ajax al hacer clic en el botón .upload-button .
Así es como lo probé en jQuery,
$(document).on('click', '.upload-button', function(e) { e.preventDefault(); //$(".file-upload").click(); $(this).next().trigger('click', function() { var $data = { 'title': 'Title', 'file': 'myfile' }; $.ajax({ type: 'POST', url: 'upload.php', data: $data, success: function(response) { }, error: function(response) {}, }); }); });Pero, este código no funciona para mí. Eso significa que no envió la solicitud ajax.
Espero que alguien pueda ayudarme.
Creo que estás mezclando un activador con un controlador de eventos.
Cuando hace clic en el div, debe activar un clic en la entrada del archivo, pero no pasa una devolución de llamada allí.
Desea configurar un controlador de cambios para la entrada del archivo para realizar una solicitud ajax cuando el archivo se selecciona con un controlador de eventos de change .
$(document).on('change', '.file-upload', function(e){ var data = new FormData(); data.append('title', 'Title'); data.append('file', this.files[0]); $.ajax({ type: 'POST', url: 'upload.php', data: data, processData: false, contentType: false, success: function(response) { }, error: function(response) {}, }); $(this).prev().html(`↑${this.files[0].name}`); }); $(document).on('click', '.upload-button', function(e) { $(this).next().click(); }); .upload-button{ cursor:pointer; } .file-upload{ opacity:0.01 } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="user-avatar-wrapper"> <img class="profile-pic" src="/placeholder.png" alt="" /> <div class="upload-button">↑</div> <input class="file-upload" type="file" accept="image/*"/> </div> <div class="user-avatar-wrapper"> <img class="profile-pic" src="/placeholder.png" alt="" /> <div class="upload-button">↑</div> <input class="file-upload" type="file" accept="image/*"/> </div>Su div está vacío y no tiene ninguna existencia para ejecutar una función Pruebe el siguiente código:
<div class="upload-button"> </div>