Clear field file when you have no more pictures

Question

Clear field file when you have no more pictures

Navigation

#1 by (2 votes)

0

I have the following stylized field that uploads multiple images:

Asaresult,itshowsasfollows:

Sofarsogood,butIwouldlikeyoutodeletealltheimages,alsoclearthefilefield.Seethecodebelow:

<labelfor='files'class="upload">Selecionar arquivos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>
<output id="list"></output>

<script>
var count=0;
function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 5 || count > 4) {
            alert("O máximo é de até 4 fotos");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
               if (!f.type.match('image.*')) {
                     continue;
               }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<input type="radio" name="Principal[]" id="principal" value="S"><img class="img-thumbnail" src="', e.target.result, '" title="', escape(theFile.name), '" style="width: 30%"/><span class="remove_img_preview"></span>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }
    $('#files').change(function(evt){
        handleFileSelect(evt);
    });
    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
      count--;
    });
</script>

jquery

asked by anonymous 03.11.2017 / 14:37

1 answer

Error Open.CV save file Insert multiple items with the same Sql sever Sql

score 2 · Accepted Answer

Pass an empty value that resolves $('#files').val(null);

var count=0;
function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 5 || count > 4) {
            alert("O máximo é de até 4 fotos");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
               if (!f.type.match('image.*')) {
                     continue;
               }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<input type="radio" name="Principal[]" id="principal" value="S"><img class="img-thumbnail" src="', e.target.result, '" title="', escape(theFile.name), '" style="width: 30%"/><span class="remove_img_preview">APAGAR</span>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }
    $('#files').change(function(evt){
        handleFileSelect(evt);
    });
    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
      count--;
      
      //So passar um valor vazio que resolve
      if(count==0){
        $('#files').val(null);
      }
      
    });
    
    //Aqui vai limbar o input e a lista de imagens
    $('#clear').on('click', function(){
      $('#files').val(null);
      $('#list').html('');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><labelfor='files'class="upload">Selecionar arquivos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>

<br />
<button type="button" id="clear">Limpar</button>
<br />
<output id="list"></output>