Delete image from input file before submitting the form

Question

I am using the script below

https://jsfiddle.net/tretaa/yrvyf2gn/52/

To make múliplos uploads.

It is working correctly. I select (for example) 3 images, then remove 1, I get 2. Anyway, the JQuery works that it is a beauty. I trust in examining Chrome element. 2 images. All correct.

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

How to solve this?

You will need to take the div list and send it as a variable in some way and disregard the input file?

Answer 1

I got.

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 selected and removed through the variable $arquivos of $_POST generated a array php

Here is 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*/
    });


});

arrayParaString:

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

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

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

    return string;

}

only with the name of the images then compare the $_POST["arquivos"] with the $_FILES["fotos"] and the one in $_FILES["fotos"] that has in the $_POST["arquivos"] i create an array only with 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;
}