0

Index.php

<<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Upload com Ajax</title>
</head>
<body>
    <div id="Principal">
        <h1>Envie suas imagens</h1>
        <form action="upload.php" enctype="multipart/form/data" method="post">
            <input type="file" name="images" multiple />
            <button type="submit" id="btn">Enviar</button>
        </form>
        <div id="response"></div>
        <ul id="image-list">

        </ul>
        <div style="clear:both;"></div>
    </div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
</body>
</html>

upload.js

(function(){
    var input = document.getElementById("images"),
        formdata = false;
    function showUplodedItem(source){
        var list = document.getElementById('image-list'),
            li = document.createElement('li'),
            img = document.createElement('img');

            img.src = source;

        li.appendChild(img);
        list.appendChild(li);
    }
    if (window.FormData) {
        formdata = new FormData();
        document.getElementById('btn').style.display = "none";
    }
    input.addEventListener('change', function(evt){
        document.getElementById('reponse').innerHTML = "Enviando Imagens.."

        var i = 0, len = this.files.length, img, render, file;

        for(; i < len; i++){
            file = this.files[i];
            if(!!file.type.match(/image.*/)){
                if(window.FileReader){
                    render = new FileReader();
                    render.onloadend(e){
                        showUplodedItem(e.target.result, file.fileName);
                    };
                    render.readAsDataURL(file);
                }
                if(formdata){
                    formdata.append('images[]', file);
                }
            }
        }
        if(formdata){
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                sucess: function(res){
                    document.getElementById('reponse').innerHTML = res;
                }
            });
        }
    }, false);
}());

upload.php

<?php

    foreach ($_FILES['images']['error'] as $key => $error) {
        if ($error == UPLOAD_ERR_OK) {
            $name = $_FILES['images']['name'][$key];
            move_uploaded_file($_FILES['images']['tmp_name'][$key], 'uploads/'.$name);
        }
        echo "Imagens enviadas com sucesso!";
    }
?>

Está dando erro:

Notice: Undefined index: images in /opt/lampp/htdocs/renan/upload/upload.php on line 3

Warning: Invalid argument supplied for foreach() in /opt/lampp/htdocs/renan/upload/upload.php on line 3

Ja revisei todo o codigo, e não consigo achar, preciso que faça o upload da imagen.

1 Resposta 1

2

Corrigi algumas coisas no seu código e o upload está funcionando agora. Veja os comentários no código.

Mudei a linha:

document.getElementById('reponse').innerHTML = "Enviando Imagens.."

Para

document.getElementById('response').innerHTML = "Enviando Imagens..";

A linha:

 render.onloadend(e){
       showUplodedItem(e.target.result, file.fileName);
 };

Para:

 render.onloadend = function(e) {
    showUplodedItem(e.target.result, file.fileName);
 };

E a linha:

 document.getElementById('reponse').innerHTML = res;

Para:

 document.getElementById('response').innerHTML = res;

Além disso, adicionei o id="images" ao input[type=file], pois no Javascript estava tentanto pegá-lo por Id (document.getElementById).

index.php

<form action="upload.php" enctype="multipart/form/data" method="post">
 <!-- FALTAVA O id="images"  -->
     <input id="images" type="file" name="images" multiple /> 
     <button type="submit" id="btn">Enviar</button>
</form> 
<div id="response"></div>

upload.js:

(function(){
    var input = document.getElementById("images"),
        formdata = false;

    function showUplodedItem(source){
        var list = document.getElementById('image-list'),
            li = document.createElement('li'),
            img = document.createElement('img');

            img.src = source;

        li.appendChild(img);
        list.appendChild(li);
    }

    if (window.FormData) {
        formdata = new FormData();
        document.getElementById('btn').style.display = "none";
    }

    input.addEventListener('change', function(evt){
        // AQUI ESTAVA COM ERRO, TENTANDO PEGAR O ID ERRADO
        document.getElementById('response').innerHTML = "Enviando Imagens.."

        var i = 0, len = this.files.length, img, render, file;

        for(; i < len; i++){
            file = this.files[i];
            if(!!file.type.match(/image.*/)){
                if(window.FileReader){
                    render = new FileReader();
                    // AQUI ESTAVA COM ERRO, A ASSOCIAÇÃO DO EVENTO
                    render.onloadend = function(e){
                        showUplodedItem(e.target.result, file.fileName);
                    };
                    render.readAsDataURL(file);
                }
                if(formdata){
                    formdata.append('images[]', file);
                }
            }
        }

        if(formdata){
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                sucess: function(res){
                    // AQUI ESTAVA COM ERRO, TENTANDO PEGAR O ID ERRADO
                    document.getElementById('response').innerHTML = res;
                }
            });
        }
    }, false);
}());

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 .