Delete image from input file before submitting form

Question

Delete image from input file before submitting form

Navigation

#1 by (1 votes)

0

I'm using the script below

To make múliplos uploads .

Is working properly. I select (for example) 3 images, then I remove 1, I get 2. Anyway, JQuery works which is a beauty. I check in to examine chrome element. 2 images. All right.

But when I give submit in the form and I get $_FILES on the other side go the 3 images. Not the 2 that were in html .

How to solve this?

Is it necessary to take the div list and send it as a variable in some way and disregard the input file?

php jquery

asked by anonymous 27.09.2016 / 22:30

1 answer

GUI python: request for interface tips and or ide's for this How to internationalize the timeline component of primefaces?

score 1 · Accepted Answer

I did it.

Html

    <div id="multiple_upload">
        <input type="hidden" id="arquivos" name="arquivos" onChange="alert(this.value)" />
        <input type="file" multiple id="fotos"  name="fotos[]" />
        <div id="message">Selecionar fotos</div> 
        <div id="lista"></div>
    </div>

In this case, I send the images after they have been selected and removed through the variable $arquivos of the $_POST generated array php

Here's the generation in JQuery:

var arquivos = new Array();

$(function(){
    $('#fotos').on('change',function() {
        var id = $(this).attr('id');
        var totalFiles = $(this).get(0).files.length;

        if(totalFiles == 0) {
          $('#message').text('Selecionar Fotos' );
        }
        if ( totalFiles > 1) {
            $('#message').text( totalFiles+' arquivos selecionados' );
        } else {
            $('#message').text( totalFiles+' arquivo selecionado' );
        }

        var htm='<ol>';

        for (var i=0; i < totalFiles; i++) {
             var c = (i % 2 == 0) ? 'item_white' : 'item_grey';
             var arquivo = $(this).get(0).files[i];
             var fileV = new readFileView(arquivo, i);

             arquivos.push(arquivo);                         

             htm += '<li class="'+c+'"><div class="box-images"><img  class="item elevate-image" data-img="'+i+'" data-id="'+id+'" border="0"></div><span>'+arquivo.name+'</span> <a href="javascript:removeFile('+i+',\''+id+'\')" class="remove">x</a></li>'+"\n";

         }


        htm += '</ol>';
           $('#lista').html(htm);
           $('#arquivos').val(arrayParaString(arquivos)); /*Aqui eu populo o campo do form id="arquivos" com um array trazido de arrayParaString*/
    });


});

arrayParString:

function arrayParaString (array) {
    i = 0;
    string = "";

    while (array[i]) {
        string += array[i].name + '|';
        i++;
    }

    string = string.substring(0, string.length - 1);

    return string;

}

Just with the name of the images, I then compare the $_POST["arquivos"] with the $_FILES["fotos"] and the one I have in $_FILES["fotos"] that has in $_POST["arquivos"] I create an array with only them using the method below:

Php

public function arrayFotos($array1, $array2) {
   $novasFotos= array();

   if(is_array($array1) && count($array1) > 0) {
       $i = 0;
       foreach($array1 as $value1) {
           foreach($array2["name"] as $key =>$value2) {
               if ($value1 == $value2) {
                   //print $value1." - ".$value2."<br>";
                   if ( $array2["error"][$key] == 0) {
                       $novasFotos[$i]["name"] = $array2["name"][$key];
                       $novasFotos[$i]["type"] = $array2["type"][$key];
                       $novasFotos[$i]["tmp_name"] = $array2["tmp_name"][$key];
                       $novasFotos[$i]["error"] = $array2["error"][$key];
                       $novasFotos[$i]["size"] = $array2["size"][$key];
                   }
                  $i++;
                  break;                                 
               }
           }
       }
   }
   return $novasFotos;
}