0

Pesquisei no SOF como enviar imagem com Jquery, testei várias e não funcionou, e outras apenas para campo em formulário, o evento deve enviar a imagem com input FORA/SEM formulário.

Input (Sem form):

<input id='ads-files-edit' type='file' accept='image/*' placeholder='Selecione a imagem' data-max-size='5242880' class='form-control form-group-lg ads-files-edit'>

Jquery:

<script type="text/javascript">
    $(function () {
        $("#ads-files-edit").change(function () {

        });
    }
</script>
4
  • A não presença de um elemento <form> é um erro de semântica (apenas um aviso). Não tenho certeza, mas acho que isso não é possível, a um tempo atrás tentei usar o jQuery para fazer o download de um PDF mas não funcionou porque o tipo Blob não é suportado pela parte de AJAX da biblioteca
    – Costamilam
    Commented 23/09/2018 às 1:07
  • pt.meta.stackoverflow.com/questions/1078/…
    – user60252
    Commented 23/09/2018 às 1:41
  • i.sstatic.net/evLUR.png
    – user60252
    Commented 23/09/2018 às 14:14
  • Obrigado a todos pela colaboração.
    – AngeloJ
    Commented 27/09/2018 às 11:11

1 Resposta 1

0

Sem form e sem botão submit

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='ads-files-edit' type='file' accept='image/*' placeholder='Selecione a imagem' data-max-size='5242880' class='form-control form-group-lg ads-files-edit'>

<script language="javascript">

$(document).ready(function() {
    $('#ads-files-edit').change(function(){
        var file_data = $('#ads-files-edit').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $.ajax({
            url: "upload-imagem.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                 $("#result").html(data);
            }
        });
    });
})

</script>

<div id="result"></div>

upload-imagem.php

<?php 

$userFile=$_FILES['file'];
$name = $userFile['name'];
$tmp = $userFile ['tmp_name'];

if(empty($userFile)):
   echo '<a href="uploadFoto.htm">Selecione um arquivo para fazer upload</a>';
else:
    if(move_uploaded_file($tmp, 'uploads/'.$name)):
            echo 'Arquivo enviado com sucesso';
    else:
            echo 'Error';
    endif;
endif;

?>
4
  • Obrigado, mas não tenho como dar pontuação, quero tirar uma dúvida, caso eu tenha mais de um input file e ao invés de usar o ID, usar a classe e o $(this) para o que foi alterado, pode ajudar?
    – AngeloJ
    Commented 23/09/2018 às 2:07
  • @AngeloJ, Como assim dar pontuação?
    – user60252
    Commented 23/09/2018 às 14:04
  • @AngeloJ, não vejo necessidade de vários inputs se com um input você pode fazer tantos uploads quanto desejar. Clica uma vez manda uma imagem, clica outra vez manda outra imagem e assim vai ....
    – user60252
    Commented 23/09/2018 às 15:09
  • Grato pela ajuda, deu certo, digo clicar na seta pra cima como resposta funcional.
    – AngeloJ
    Commented 27/09/2018 às 11:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .