Error Uploading images with ajax

Question

Error Uploading images with ajax

Navigation

#1 by (2 votes)

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!";
    }
?>

It is giving error:

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

I have reviewed all the code, and I can not find it, I need to upload the image.

php ajax upload

asked by anonymous 09.06.2015 / 15:09

1 answer

Does the cURL request in php resolve a subdomain locally? Links does not work in menu

score 2 · Accepted Answer

I fixed some things in your code and the upload is working right now. See the comments in the code.

I changed the line:

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

To

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

The line:

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

To:

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

And the line:

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

To:

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

In addition, I added id="images" to input[type=file] , because in Javascript I was trying to get it by 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);
}());