Membuat Upload Foto Javascript method ajax native dan Fetch Javascript

Javascript ES6

Untuk Kali ini Coba Nge-Share Upload Foto dengan Vanilla Javascript dengan 2 method. method pertama dengan menggunakan native ajax. yang kedua dengan menggunakan method fetch. let' go kita coba mulai kodingannya : 😎💪

1. upload foto javacript dengan ajax native .

kita siapkan satu file bernama index.php sbb :

<script>

----------------------- Awal ini adalah penyederhaan dari element ------------------------------

function _(el){

return document.getElementById(el);

}

----------------------- Akhir  ini adalah penyederhaan dari element -----------------------------

----------------------- ini adalah function upload filenya  ------------------------------------------

function uploadFile(){

var file = _("file1").files[0]; // name dari file-image

var formdata = new FormData(); //deklarasi form menggunakan js

formdata.append("file1", file); // name dari element html beserta value yang dikirim ke server

var ajax = new XMLHttpRequest();  // initial untuk ajax 

ajax.open("POST", "file_upload.php"); // action ajax

ajax.onreadystatechange = function() {. // jika ajax berhasil dan mengirim response baliknya

if(ajax.readyState == 4 && ajax.status == 200) {

var return_data = ajax.responseText;

console.log(return_data);

_("status").innerHTML= return_data;

}

}

ajax.send(formdata); //form yang dikirm

}

</script>

<form id="upload_form" enctype="multipart/form-data" method="post">

  <p><input type="file" name="file1" id="file1"></p>

  <p><input type="button" value="Upload File" onclick="uploadFile()"></p>

<p id="status"></p>

</form>

berikutnya adalah kita menyiapkan pengiriman ke server , kita buat file dengan nama file_upload.php

<?php

$fileName = $_FILES["file1"]["name"]; // name dari file 

$fileTmpLoc = $_FILES["file1"]["tmp_name"]; //  PHP tmp folder

$fileType = $_FILES["file1"]["type"]; // jenis dari file 

$fileSize = $_FILES["file1"]["size"]; // Ukuran size dalam bytes

$fileErrorMsg = $_FILES["file1"]["error"]; // 0 untuk false... and 1 untuk true

if(move_uploaded_file($fileTmpLoc, "test_upload/$fileName")){

    echo "OKE";

} else {

    echo "GAGAL";

}

?>

2. upload foto javacript dengan Fetch data.

method Fetch adalah method yang lebih asyncronus untuk pengiriman data ke servernya. 

pertama kita siapakan index.phpnya.

<form enctype="multipart/form-data" method="post">

  <p><input type="file" name="file" id="image"></p>

  <p><input type="button" id="upload_btn" value="Upload File"></p>

  <p id="output"></p>

</form>

<script src="script.js"></script>

yang kedua kita siapkan vanilla javascriptnya.

function _(el){

   return document.getElementById(el);

}

//inital event submit

_("upload_btn").addEventListener('click',uploaddata);

function uploaddata(event){

  event.preventDefault(); // mencegah default js

//initsial header untuk mehod data

const  h = new Headers();

       h.append('Accept','application/json');

// initial variable form data

const  fd = new FormData();

const  myFile = _('image').files[0];

        fd.append('avatar', myFile);

// format data pengiriman ke server

  let req = new Request('http://localhost/blog/upload.php', {

          method: 'POST',

          headers: h,

          mode: 'no-cors',

          body: fd

      });

    //method pengiriman data

    fetch(req)

            .then( (response)=>{

              console.log(response);

                _('output').textContent = "Oke";

            })

            .catch( (err) =>{

                console.log('ERROR:', err.message);

            });

}

 selenjutnya kita buat pengiriman data ke server 

<?php

$fileName = $_FILES["avatar"]["name"]; // file name

$fileTmpLoc = $_FILES["avatar"]["tmp_name"]; // PHP tmp folder

if(move_uploaded_file($fileTmpLoc, "test_upload/$fileName")){

    echo "OKE";

} else {

    echo "GAGAL";

}

?>