Picking up javascript arrays for sending in the form

Asked

Viewed 117 times

0

<script type="text/javascript">
var nomess = [];

function handleFileSelect() {                                  

    var output = document.getElementById("resultt");
    arquivos = $("#imagem").prop("files");
    var nomes = $.map(arquivos, function(val) { return val.name; });

    //new
    var filesStr = "";
    for (let i = 0; i < arquivos.length; i++) {
        var extensao = nomes[i].split('.').pop().toLowerCase();
        if(extensao == "doc" || extensao == "docx"){
            icone = "http://www.programari.com.br/assets/images/icons/word.png";
        }else if(extensao == "jpg" || extensao == "jpeg"){
            icone = "http://www.programari.com.br/assets/images/icons/jpg.png";
        }else if(extensao == "png"){
            icone = "http://www.programari.com.br/assets/images/icons/png.png";
        }else if(extensao == "xml"){
            icone = "http://www.programari.com.br/assets/images/icons/xml.png";
        }else if(extensao == "gif"){
            icone = "http://www.programari.com.br/assets/images/icons/gif.png";
        }else if(extensao == "pdf"){
            icone = "http://www.programari.com.br/assets/images/icons/pdf.png";
        }else if(extensao == "bmp"){
            icone = "http://www.programari.com.br/assets/images/icons/bmp.png";
        }else if(extensao == "txt"){
            icone = "http://www.programari.com.br/assets/images/icons/txt.png";
        }else if(extensao == "xlsx" || extensao == "xls"){
            icone = "http://www.programari.com.br/assets/images/icons/xls.png";
        }else{
            icone = "http://www.programari.com.br/assets/images/icons/file.png";
        }
        nomess.push(arquivos[i]);
        filesStr += "<li>" + arquivos[i].name + "<button onclick='removeLiy(this)' style='background-color:white; border:0'><i class='fas fa-trash' style='color:red; font-size: 24px; padding: 8px 0px 0px 3px;'></i></button><img src='"+icone+"' height='24' />" + "</li>";

    }

    console.log(nomess);

    document.getElementById("imagem").value = '';
    document.getElementById("result").innerHTML += filesStr;
    document.getElementById('imagem').addEventListener('change', handleFileSelect, true);

}

function removeLiy(e) {
    nomess = nomess.filter(function(imagem) {
        return imagem.name !== e.parentNode.innerHTML.split("<button")[0];
        //alert(nomess);
        console.log(nomess);
        //var aqui ='aqui';

    })
    e.parentNode.parentNode.removeChild(e.parentNode);
    console.log(nomess);
    //var aqui ='aqui nao';

    var myJSON = JSON.stringify(arquivos);
    document.getElementById("result").innerHTML = myJSON;

    console.debug('myJSON');

}

document.getElementById('imagem').addEventListener('change', handleFileSelect, false);
</script>

I’m trying to capture the Arrays Javascript and move on to a input hidden of my form to submit it and send to a file PHP for upload. inserir a descrição da imagem aqui

php javascript array multidimensional-array array-push

  • Welcome Richard Barcelos, you could add the code you are using?

  • 1

    hello buddy, yes. I’ll put.

  • Richard, I saw that your code does a lot of things, you could detail your problem better so I can understand?

  • Of course friend, I have a form with fields: textarea, date field and multiple file type field. When I click on add files it adds and creates an array with.pushname. This is ok, add and delete, My problem is to take the generated array with the images and send by clicking the send button of the form.

  • when I give a console.log(namess) it shows the image I put... I need to take this array names and put inside the image input file for when I send the form it send those selected files

  • in this other post I ask the same question: https://answall.com/questions/362273/como-fazer-o-campo-input-file-multiple-em-uma-segunda-sele%C3%A7%C3%A3o-maintain-os-arquivos/362515#362515 ?

  • You want to capture an array of files and add to the value of a input Hidden, that’s it?

  • I don’t know if that would be the best way. Because I don’t know if the Hidden input could pass me the data for processing the images in the php file that the form action sends... along with the other fields I already have inside the <form>

    • I’m sorry if I’m explaining a little confusing. I need to take this array of files and send along with my form... for upload treatment

  • Did you understand?

  • You want to do this because the input file is out of form?

  • If you have in the form the files are already sent as array, no?

  • input file is inside the form. I select for example a file from one folder, after another and so it goes to the end I want to get everyone I selected and stored in the javascript array, by clicking on the send I want to send all attachments.

  • Are in the form most are not being sent no..

  • @sam You would know how to pass this array of images to the form submission??

  • Take a look in this answer. I think you get the input name.

  • @Sam tried here and did not equal to pick up the name of the input

Show 12 more comments

2 answers

0

I suspect you can’t do what you’re trying to do because in this array nomess you do not have the file path, but only their names. The most common browsers do not provide the full file address for Javascript.

If you had the full path of each file, my suggestion would be to add a Function to the form’s "Submit" event, which would create an input type="file" within the form for each file of the array.

An alternative would be to load each file via Javascript and pass it on form later. There are those who have done this at some point in history, for example, here: https://davidwalsh.name/fakepath#comment-49530 But I believe that this would be another topic because then I would have to find a way to send these files to PHP after all.

Anyway, I answered in your other question (same subject) here: /a/363048/45707

There, I explained how I would clone the input type="file" each time the "change" event occurs. I believe it is a solution. The challenge is only to "remove" when there are multiple files in the same input. Who knows if you choose to remove the attribute from Multiple files and handle one on one?

Let me know if it helped you ;)

  • Hello friend, so now I worried rsrsr Because what I want to do is to get the selected file in the input file list it in a list where it can be removed or added other files and by clicking on the form it submits the same sending the selected files...

  • Javascript wouldn’t be the most suitable language? which would be? to keep the file information path, weight, extension.. That I may lift up after.. ? Did he give me Ruin? rsrsr

  • When we talk about manipulation in the browser, js is the same way. I think if you remove the "Multiple" attribute from the input to treat one file at a time and use the scheme I proposed here in the other answer has great chance to resolve your issue.

  • Ok! But I need to keep that format of showing the icon by the if of the extension I’ve built and delete it..

  • Got it @Richardbarcelos I think I can elaborate more the answer there for you. Let’s follow the conversation there in the other question? hehe I think it is more practical and organized for us.

  • of course, I’m kind of new in history, I just need it to be like this initial code. Thanks again

Show 1 more comment

0

SORRY THE DRAFT IMAGE @emanuelpoletto

inserir a descrição da imagem aqui

Browser other questions tagged php javascript array multidimensional-array array-push

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