Estoy usando una carga de varios archivos con un formulario en django. Quiero mostrar los archivos seleccionados en una lista y que el usuario pueda eliminar los archivos que quiera antes de cargarlos. Hay un botón de borrar para ello.
Me basé en una publicación para hacer en Jquery. Funciona para mostrar los archivos y eliminarlos de la lista que se muestra en la página web. Sin embargo, los archivos que se eliminan aún se cargan incluso si no se muestran en la lista.
var fileInput = document.getElementById('id_Filename'); var fileListDisplay = document.getElementById('fileselect'); var fileList = []; var renderFileList, sendFile; fileInput.addEventListener('change', function(evnt) { fileList = []; for (var i = 0; i < fileInput.files.length; i++) { fileList.push(fileInput.files[i]); } renderFileList(); }); renderFileList = function() { fileListDisplay.innerHTML = ''; fileList.forEach(function(file, index) { var fileDisplayEl = document.createElement('p'); fileDisplayEl.innerHTML = `${file.name} <button data-index="${index}" class='deletfile'>X</button>`; fileListDisplay.appendChild(fileDisplayEl); }); }; $(document).on('click', '.deletfile', function() { const index = $(this).attr('data-index'); fileList.splice(parseInt(index, 10), 1); $(this).parent().remove(); }); <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> <div> <input type="file" name="Filename" class="form-control" multiple="" onchange="javascript:updateList()" maxlength="255" id="id_Filename"> </div> <div class="block-file-selection"> <p>Selected files:</p> <div id="fileselect"></div> </div>