Assigning value of an image (s) in Javascript input

Question

Assigning value of an image (s) in Javascript input

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I have the following input

<input type="file" id="imagefiles" name="files[]" multiple accept="image/*" style="display:none;" />

This input receives up to 3 images

I am using javascript to give a post like this 'Imagem': $('#imagefiles').val(), but in that case it only takes the first image, as I am using files[] would like to know how do I access the 3 vector positions and assign in javascript .

Agradicmento @MagicHat for helping me in the past issue, has provided me the code to upload the images, follow the code I am using:

 var fileSelect = document.getElementById("fileSelect");
var fileElem = document.getElementById("imagefiles");



fileSelect.addEventListener("click", function (e) {
    fileSelect.style.cssFloat = "top";
    fileSelect.style.marginRight = "10px";
    fileSelect.style.marginTop = "-3px";
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault();
}
, false);

function handleFileSelect(evt) {

    var list = document.getElementById("list").childElementCount;
    var files = evt.target.files;
    var qtde = files.length;
    var nomes = fileElem.files;
    var nome;

    if (qtde > 3 || list > 2) {
        alert('Erro! Número máximo de fotos é 3 !');
        document.getElementById('imagefiles').value = "";
        return;
    } else {
        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 =
'<div class="col-lg-4">' + "<a href='#'><img style='float:left;padding: 1px;height: 155px; margin-right:15px; width: 155px;border: 5px solid #c7c7c7;margin-top: 0px;' src='" + e.target.result + "'" + "title='" + escape(theFile.name) + "'/>" + '<img src="/Content/imagens/principais/close-button.png" style="height: 15px; width: 15px; margin-right:5px;">' + "  </a></div>";
                    document.getElementById('list').insertBefore(span, null);
                    span.children[0].addEventListener("click", function (evt) {
                        span.parentNode.removeChild(span);
                    });
                };
            })(f);
            reader.readAsDataURL(f);
        }
        return true;
    }
}
document.getElementById('imagefiles').addEventListener('change', handleFileSelect, false);

EDIT: the complete part of the input:

<legend class="leg_img">Insira imagens</legend>
                <fieldset id="upload_img" class="nf_class upload_img">
                    <input type="file" id="imagefiles" name="files[]" multiple accept="image/*" style="display:none;" />
                    <a href="#" id="fileSelect" class="btn btn-success" style="margin-bottom:10px">selecionar imagens</a>
                    <div id="list" style="margin-bottom:0;"></div>
                </fieldset>

EDIT 2: Post:

 $('#btnSubmit').click(function () {
    NovaPublicacao();
})

function NovaPublicacao() {
    var produtoData = {

        'Titulo': $('#produtoTitulo').val(),
        'Descricao': $('#produtoDescricao').val(),
        'Imagem': $('#imagefiles').val()

        // adicionando valores as variáveis
    };
    console.log(produtoData);

    $("#disableModal").addClass("disabledbutton"), // disabilita a pagina
    $('#loadingModal').show(); // Adiciona o Loading
    $.ajax({
        url: "/Produto/Publicar", //altere para o caminho que você vai querer mandar o post
        type: "post", //tipo post
        data: produtoData, //os dados
        success: function (json) { //em caso de  sucesso faça
            if (json.isRedirect) {
                window.location.href = json.redirectUrl;
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {//em caso de erro faça
            console.log(textStatus, errorThrown);
        }
    });
}

EDIT 3: I'm going to explain a little bit about the Backend situation, these methods were not me who did it, but since they did not server but for the Administrator model, because they uploaded just 1 photo, I'll have to change it, but I still do not know how to get the information I need for it, so I have not changed it yet.

  public JsonResult CriarPublica(string ProdutoId, HttpPostedFileBase uploadFile)
    {
        if (Web.Utils.Util.ExtensaoPermitidaImagem(Path.GetExtension(uploadFile.FileName.ToLower())))
        {
            int idProduto = Convert.ToInt32(SystemCriptografia.ToDescriptografaQueryString(ProdutoId));
            var produto = ProdutoServico.GetById(idProduto);
            if (produto == null)
                return Json(new { Erro = true, Msg = ConfigurationManager.AppSettings["MSG_ERRO_DADOS"] });
            int qntofotos = this.FotoProdutoServico.GetMany(p => p.ProdutoId == idProduto).Count();
            if (qntofotos == produto.Loja.QntMaxFotosProduto)
            {
                return Json(new { Erro = true, Msg = ConfigurationManager.AppSettings["MSG_NUMERO_MAXIMO_FOTOS"] });
            }

            string NomeImagem = uploadFile.FileName.ToLower();
            string ExtensaoImagem = Path.GetExtension(uploadFile.FileName.ToLower());
            FotoProduto foto = new FotoProduto(idProduto, NomeImagem, ExtensaoImagem);

            this.FotoProdutoServico.Add(foto);

            int dimensao = Convert.ToInt32(ConfigurationManager.AppSettings["TAMANHO_FOTO_PRODUTO"]);
            Image i = Image.FromStream(new MemoryStream(Web.Utils.Util.RedimensionarImagem(uploadFile.InputStream, dimensao)));
            ProdutoServico.SalvarArquivoProduto(i, foto);

            //-----INSERÇÃO NO MODELO ANTIGO!
            produto.NomeImagem = produto.ProdutoId.ToString();
            produto.Extensao = ExtensaoImagem;
            this.ProdutoServico.Update(produto);

            Image f = Image.FromStream(new MemoryStream(Web.Utils.Util.RedimensionarImagem(uploadFile.InputStream, dimensao)));
            ProdutoServico.SalvarArquivos(i, produto);
            //-----------------------


            return Json(new { Atualizar = true, Msg = ConfigurationManager.AppSettings["MSG_IMG_ENVIADA"] });
        }
        else
        {
            return Json(new { Erro = true, Msg = ConfigurationManager.AppSettings["MSG_ERRO_EXTENSAO_IMAGEM"] });
        }
    }

}

OBS. Actually it has one more method but I'm still analyzing these backend methods, maybe I'll change them completely.

javascript jquery ajax

asked by anonymous 13.09.2016 / 15:40

3 answers

1

The .val() method of jQuery only returns information about the first Array item.

The input file contains the files property of type FileList , which contains the information of the selected images.

Iterate over this property to populate the produtoData of POST, and call the $ .ajax with options to apply the processing patterns on produtoData when sending the request:

var imageFiles = document.getElementById('imagefiles');

var produtoData = new FormData();

var files = document.getElementById('imagefiles').files;
for (var i = 0; i < files.length; i++) {
  produtoData.append('Imagem['+i+']', files[i]);
}

$.ajax({
  ...,
  processData: false,    // Não transforma ajaxData
  contentType: false,
  ...
});

13.09.2016 / 18:51

1

So you want to pass multiple images to the URL? In addition to doing this, you'll need to go through each one in the code next to the server.

One way to do this is to create parameters in the URL (or POST) with a prefix at the beginning of the name, for example:

? Image0 = & Image1 =

And so we can save the data of each image in a parameter that starts with the prefix "Image", with some number or name in the front, always different from the previous one.

Now here's an example implementation in your code:

(Client-side)

/* cria o parâmetro de cada imagem */
for (var i = 0, files = $("#imagefiles")[0].files, f; f = files[i++];) {
    var reader = new FileReader
    reader.onload = function() {
        /**
         * this.result contém o conteúdo binário da imagem
         * criptografado com base64, com um
         * cabeçalho extra usado em URLs.
         */
        produtoData["Image" + i] = encodeURIComponent(this.result);
    }
    reader.readAsDataURL(f)
}

(Server-side)

I do not understand how C # works to capture URL parameters, in fact I've never used C # on the server side. This is an example in PHP that can be easily converted to C #.

<?php

/* atravessa cada parâmetro no URL */
foreach ($_POST as $url_param) {

    /* checa se começa o parâmetro começa com "Image" */
    if (substr($url_param, 0, 5) === "Image")

        /* possíveis dados */

        /* $_POST['Titulo'], $_POST['Descricao'], $url_param) */
}

13.09.2016 / 18:51

Extract numbers from a list using Regex Slow Search Ignoring Accents

score 1 · Accepted Answer

I did not test, see if it helps ...

function NovaPublicacao() {

    var elem = document.getElementById("imagefiles");
    var images = [];
    for (var i = 0; i < elem.files.length; ++ i) {
       images.push(elem.files[i].name);
    }
    var produtoData = {

        'Titulo': $('#produtoTitulo').val(),
        'Descricao': $('#produtoDescricao').val(),
        'Imagem': images[];
};