Remove specific input file Multiple type="file"

Asked

Viewed 931 times

1

I input as follows:

<input type="file" id="arquivos" name='arquivos[]' multiple onchange="funcao_listar()">

Where after clicking the button and selecting the various files to upload it lists the file with the delete button next to according to the figure (figure just to illustrate).

inserir a descrição da imagem aqui

How do I remove a specific input file when clicking on the delete icon? Making it clear that it is not just removing the view item but removing the input for when it is clicked on Ubmit not to be uploaded the same.

  • 1

    Take a look at the following soen link, I believe I can help you

2 answers

1

I believe it is not possible to do this removal of just one or a few specific items. http://www.w3.org/TR/FileAPI/#dfn-filelist

The Htmlinputelement interface [HTML5] has a readonly Filelist attribute, [...]

However, it is possible to reset the entire list with the code:

document.getElementById('arquivos').value = "";
  • In case then it is possible to clear the list of input files and add a new list but without the item selected for deletion, giving the impression that it was deleted? In this case the list would be copied into another variable (or object, or array), clearing the input and then the copied list added but without the selected item for deletion. If possible, how do I add files to the input? In case this list is copied.

  • @Andersonbrunelmodolon I believe it is not possible to add the new list. Filelist is readonly, I find it easier for you to keep a separate list and handle it in serverside. However, I don’t think the effort pays. Put a clean all button and tell the user to stop being lazy. Rsrsrs

1

The list of files on <input type="file" multiple> is read-only, but you can keep a separate list to handle the files as follows. Source example

Example

var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {



  var ooleft = dropZone.offset().left;
  var ooright = dropZone.outerWidth() + ooleft;
  var ootop = dropZone.offset().top;
  var oobottom = dropZone.outerHeight() + ootop;

  document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
    dropZone.addClass(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);

  if (buttonId != "") {
    var clickZone = $("#" + buttonId);

    var oleft = clickZone.offset().left;
    var oright = clickZone.outerWidth() + oleft;
    var otop = clickZone.offset().top;
    var obottom = clickZone.outerHeight() + otop;

    $("#" + buttonId).mousemove(function(e) {
      var x = e.pageX;
      var y = e.pageY;
      if (!(x < oleft || x > oright || y < otop || y > obottom)) {
        inputFile.offset({
          top: y - 15,
          left: x - 160
        });
      } else {
        inputFile.offset({
          top: -400,
          left: -400
        });
      }
    });
  }

  document.getElementById(dropZoneId).addEventListener("drop", function(e) {
    $("#" + dropZoneId).removeClass(mouseOverClass);
  }, true);


  inputFile.on('change', function(e) {
    finalFiles = {};
    $('#filename').html("");
    var fileNum = this.files.length,
      initial = 0,
      counter = 0;

    $.each(this.files, function(idx, elm) {
      finalFiles[idx] = elm;
    });

    for (initial; initial < fileNum; initial++) {
      counter = counter + 1;
      $('#filename').append('<div id="file_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
    }
  });



})

function removeLine(obj) {
  inputFile.val('');
  var jqObj = $(obj);
  var container = jqObj.closest('div');
  var index = container.attr("id").split('_')[1];
  container.remove();

  delete finalFiles[index];
  //console.log(finalFiles);
}
#drop-zone {
  width: 100%;
  min-height: 150px;
  border: 3px dashed rgba(0, 0, 0, .3);
  border-radius: 5px;
  font-family: Arial;
  text-align: center;
  position: relative;
  font-size: 20px;
  color: #7E7E7E;
}

#drop-zone input {
  position: absolute;
  cursor: pointer;
  left: 0px;
  top: 0px;
  opacity: 0;
}


/*Important*/

#drop-zone.mouse-over {
  border: 3px dashed rgba(0, 0, 0, .3);
  color: #7E7E7E;
}


/*If you dont want the button*/

#clickHere {
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 17px;
  width: 150px;
  border-radius: 4px;
  background-color: #4679BD;
  padding: 10px;
}

#clickHere:hover {
  background-color: #376199;
}

#filename {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5em;
}

.file-preview {
  background: #ccc;
  border: 5px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}

.closeBtn:hover {
  color: red;
  display: inline-block;
}


}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
  <p>Drop files here...</p>
  <div id="clickHere">or click here.. <i class="fa fa-upload"></i>
    <input type="file" name="file" id="file" multiple />
  </div>
  <div id='filename'></div>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.