He escrito un código para cargar varios archivos clonando el campo de entrada en jquery.
Aquí la lógica es; si el campo #file_1 está vacío, se supone que $('#addBtn').on('click', function () debe ir en else parte de la condición if y mostrar la etiqueta <p> oculta relevante. Si se deja el primer campo vacío, el botón Agregar (botón Agregar más) no debe clonar el campo. En su lugar, debe mostrar un mensaje al usuario para que cargue el archivo en el primer campo disponible primero y haga clic en el botón Agregar para cargar más archivos. Aquí Jquery show()/hide La función no funciona. Por favor, eche un vistazo a mi código, estaré muy agradecido. ¡Gracias!
console.log('objection page here'); var Index = 1; // START CODE FOR BASIC DATA TABLE $(document).ready(function () { $('#addBtn').on('click', function () { var uploadFieldVal = $('#file_'+ Index).val(); console.log(uploadFieldVal); if(uploadFieldVal !="") { Index++; var uFile = $('#file_1').clone(); //var id = "btnAdd_" + Index; var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "'class='form-control'/> ; " + "<p id='fileMsg_" + Index + "style='visibility: hidden; color: red'>Please attach file here first </p>;" $('#fileDiv').append(fileItem); } else { console.log('fileMsg_'+Index); $('#fileMsg_'+Index).show(); //$('#fileMsg_1).show(); //its also not working } }); }); <button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i> </button> <div class="form-group" id="fileDiv"> <label for="file_1">File</label> <input type="file" name="fileUpload[file][]" id="file_1" class="form-control"/> <p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>.show() no funciona en CSS para visibilidad.
Los elementos coincidentes se revelarán inmediatamente, sin animación. Esto es más o menos equivalente a llamar a
.css( "display", "block" ), excepto que la propiedad de visualización se restaura a lo que era inicialmente. Si un elemento tiene un valor de visualización deinline, luego se oculta y se muestra, una vez más se mostrará en línea.
$(function() { console.log('objection page here'); var Index = 1; $('#addBtn').on('click', function() { var uploadFieldVal = $('#file_' + Index).val(); console.log(uploadFieldVal); if (uploadFieldVal != "") { Index++; var uFile = $('#file_1').clone(); var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "' class='form-control'/> ; "; fileItem += "<p id='fileMsg_" + Index + "' style='visibility: hidden; color: red'>Please attach file here first </p>;" $('#fileDiv').append(fileItem); } else { console.log('fileMsg_' + Index); $('#fileMsg_' + Index).css("visibility", "visible"); } }); }); <button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i></button> <div class="form-group" id="fileDiv"> <label for="file_1">File</label> <input type="file" name="fileUpload[file][]" id="file_1" class="form-control" /> <p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> Debe cambiar la visibilidad a visible para "mostrarla".
Ver más: https://api.jquery.com/show/