Upload prin ajax

Limbaje de Programare JavaScript / Node
1

Va rog frumos cu o parere ca m-a obosit problema !

Am codul HTML

<div class="user-img" style="background-image: url('/avatar/7bbcc082e03aa5fe4e77983c52ecf129.jpg');"> <input type="file" class="hidden" id="avatar" file-model="myFiles" accept="image/*"> <a href="" id="modifyAvatar">Modifica<span> poza de profil</span></a> <a href="" id="deleteAvatar">Sterge<span> poza de profil</span></a> </div>

Am codul PHP

move_uploaded_file( $_FILES['userImage'] ['tmp_name'], $path);

Am codul Ajax


$("document").ready(function() {

    $("input:file").change(function() {

        if (window.FormData !== undefined) {

            var i = $("#avatar").get(0),

                n = i.files,

                t = new FormData;

            t.append(n[0].name, n[0]);

            $.ajax({

                url: "/UploadAvatar",

                type: "POST",

                contentType: !1,

                processData: !1,

                data: t,

                success: function(n) {

                    n.length > 0 && ($(".user-img").css("background-image", "url('" + n + "')"), $(".user-avatar").attr("src", n))

                }

            })

        } else alert("FormData is not supported.")

    });

    $("#modifyAvatar").click(function(n) {

        n.preventDefault();

        $("#avatar").click()

    });

    $("#stergeAvatar").click(function(n) {

        n.preventDefault();

        $.ajax({

            url: "/stergeAvatar",

            type: "POST",

            contentType: !1,

            processData: !1,

            success: function(n) {

                $(".user-img").css("background-image", "url('" + n + "')");

                $(".user-avatar").attr("src", n)

            }

        })

    })

})

Nu inteleg de ce nu imi gaseste $_FILES[‘userImage’] (nu se uploadeaza ca spune ca nu s-a gasit specificatia)

2

Ai atributul enctype="multipart/form-data" la tag-ul form ?

3

nu e pus intr-un form inputul…

Codul de mai sus l-am preluat de pe un site (publi24) …
10% e functional codul (sterge avatarul)
se acceseaza pagina de upload
doar ca nu situ ce sa-i pun la upload $_FILES[‘userImage’][‘name’]
am inlocuit pe ghicite userImage cu -> file, files, avatar, name, nume,t …nimic…

4

Dai un var_dump($_REQUEST), vezi ce primesti.

5

array(0) {
}

asta imi da :frowning:

6

am descarcat HEADER LIVE chrome

http://localhost/UploadAvatar

Accept: / Origin: http://localhost X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryKmlAsoP6LBFalhBJ

------WebKitFormBoundaryKmlAsoP6LBFalhBJ Content-Disposition: form-data; name=“631380_splash.png”; filename=“631380_splash.png” Content-Type: image/png

POST: HTTP/1.1 200 OK

Date: Sat, 08 Jun 2019 00:12:52 GMT Server: Apache/2.4.38 (Win64) OpenSSL/1.1.1b PHP/7.3.3 X-Powered-By: PHP/7.3.3 Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate Pragma: no-cache Content-Length: 244 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Content-Type: text/html; charset=UTF-8

1 Like
7

Vad ca ai editat primul post. Inputul nu mai are atributul name, inainte il avea.

$_FILES["atributul_name_al_inputului"][...]

8 
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['image']['name'];
    $file_size = $_FILES['image']['size'];
    $file_tmp = $_FILES['image']['tmp_name'];
    $file_type = $_FILES['image']['type'];
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

    $extensions= array("jpeg","jpg","png");

    if(in_array($file_ext,$extensions)=== false){
        $errors[]="extension not allowed, please choose a JPEG or PNG file.";
    }

    if($file_size > 2097152) {
        $errors[]='File size must be excately 2 MB';
    }

    if(empty($errors)==true) {
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo "Success";
    }else{
        print_r($errors);
    }
}
?>
<html>
<body>

<form action = "" method = "POST" enctype = "multipart/form-data">
    <input type = "file" name = "image" />
    <input type = "submit"/>

    <ul>
        <li>Sent file: <?php echo $_FILES['image']['name'];  ?>
        <li>File size: <?php echo $_FILES['image']['size'];  ?>
        <li>File type: <?php echo $_FILES['image']['type'] ?>
    </ul>

</form>

</body>
</html>

Poti sa stergi ce nu folosesti. Recomand sa faci error check inainte. Directorul in care faci upload-ul trebuie sa fie creat.

9

@zshare: fișierele sunt în variabila $_FILES, nu în $_REQUEST.

@Cosmin_Popescu provocarea pare a fi la partea de ajax (i.e. trimitere fișiere), nu la server.

@kts: elimină tot codul inutil. Events de click etc. Lași doar request-ul ajax cu minimum de opțiuni și vezi dacă merge (îl poți rula din consolă):

$.ajax({
    url: "/UploadAvatar",
    type: "POST",
    data: t,
    enctype: 'multipart/form-data', // <<<<<< adaugă enctype
})
2 Likes
10

Intr-adevar !
In exemplu, are si un foarte simplu formular :slight_smile:

11

Corect, am gresit eu.

12

Salut, directorul este creeat.
Doresc sa folosesc functia de upload exact cum am pus-o mai sus fara acel FORM…
Problema mea e din ajax …

13

Ce am postat eu mai sus au cei de la publi24 la modificarea contului (respectiv modifica avatar) la ei functioneaza cu ajaxul pus de mine aici, dar probabil au setat fisierul de upload altfel fata de un UPLOAD normal…Ma gandeam ca stie cineva cu ce trebuie sa inlocuiesc acel $_FILES[“filename”][“name”]

14

El din ce a precizat input file nu il are intr-un “form”, e un simplu input file din care doreste sa preia fisierul prin ajax.

In php handler (respectiv /UploadAvatar) $_FILES nu o sa aiba ca si key name “userImage” ci are numele fisierulul uploadat.

Deci in php handler trebuie sa foloseasca ceva de genul:

$file = current($_FILES);
move_uploaded_file($file["tmp_name"], "nume_imagine.jpg");
1 Like