[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-tutorial-upload-gambar-dengan-php-dan-jquery":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},440,"tutorial-upload-gambar-dengan-php-dan-jquery","Tutorial Upload Gambar Dengan PHP dan JQuery","Tutorial kita kali ini membahas tentang upload gambar dengan menggunakan PHP dan JQuery. JQuery akan digunakan di client side, dimana kita akan membuat proses upload secara asynchronous (tanpa mereloa",null,[],"2020-10-29T16:00:00Z","2026-07-14T04:39:39.842383Z","\u003Cp>Tutorial kita kali ini membahas tentang upload gambar dengan menggunakan PHP dan JQuery. JQuery akan digunakan di client side, dimana kita akan membuat proses upload secara asynchronous (tanpa mereload halaman) dan PHP di server side untuk memproses file yang kita upload tersebut.\u003C\u002Fp>\n\u003Cp>Demo\u003C\u002Fp>\n\u003Ch4>Persiapan\u003C\u002Fh4>\n\u003Cp>Pertama kita akan membuat sebuah folder dengan nama ajax-upload di local server kamu. Jika kamu menggunakan XAMPP atau MAMP kamu bisa buat di dalam folder htdocs. Adapun susunan directory dan file dalam tutorial kita kali ini adalah:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ajax-upload\u002F\n    - uploads\u002F  -&gt; folder tempat upload gambar\n    - index.php -&gt; halaman utama dari tutorial ajax upload\n    - main.js -&gt; javascript coding\n    - upload.php -&gt; menghadle proses upload\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika kalian sudah membuat directory dan file seperti di atas. Kita lanjut ke step selanjutnya.\u003C\u002Fp>\n\u003Ch4>index.php\u003C\u002Fh4>\n\u003Cp>index.php adalah file yang berfungsi sebagai halaman utama dari sistem yang kita buat. Ayuk kita mulai ngoding.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Ajax Image Upload&lt;\u002Ftitle&gt;\n\t&lt;style type=\"text\u002Fcss\"&gt;\n\t\t.container{\n\t\t\tbackground: #f9f9f9;\n\t\t\twidth: 50%;\n\t\t\tmargin: auto;\n\t\t\tpadding: 15px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.loading {\n\t\t\tfont-style: italic;\n\t\t\tcolor: red;\n\t\t}\n\t\t.image-place img {\n\t\t\tmargin: 1px;\n\t\t}\n\t&lt;\u002Fstyle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;h1&gt;Ajax Image Upload&lt;\u002Fh1&gt;\n\t\t&lt;div class=\"upload-place\"&gt;\n\t\t\t&lt;div id=\"preview\"&gt;\n\t\t\t&lt;\u002Fdiv&gt;\n\t\t\t&lt;form id=\"image-upload\" action=\"upload.php\" method=\"post\" enctype=\"multipart\u002Fform-data\"&gt;\n\t\t\t\t&lt;input type=\"file\" name=\"image\" id=\"image\" required \u002F&gt;\n\t\t\t&lt;\u002Fform&gt;\n\t\t\t&lt;p class=\"loading\"&gt;&lt;\u002Fp&gt;\n\t\t\t\n\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;hr&gt;\n\t\t&lt;div id=\"image-place\"&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t&lt;\u002Fdiv&gt;\n\t\n\t\n\t&lt;script type=\"text\u002Fjavascript\" src=\"http:\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fjquery\u002F2.1.1\u002Fjquery.min.js\"&gt;&lt;\u002Fscript&gt;\n\t&lt;script type=\"text\u002Fjavascript\" src=\"main.js\"&gt;&lt;\u002Fscript&gt;\n&lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sedikit penjelasan tentang isi dari file index.php di atas bisa kita bagi menjadi beberapa part utama yaitu:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Div dengan id preview : berfungsi untuk preview sementara file yang akan kita upload\u003C\u002Fli>\n\u003Cli>Sebuah form denga input type file\u003C\u002Fli>\n\u003Cli>Sebuah tag paragraph dengan class loading yang berfungsi untuk menampilkan status dari proses upload tersebut dan pesan saat upload sudah berhasil atau tidak.\u003C\u002Fli>\n\u003Cli>Div dengan id image-place, yang berfungsi sebagai tempat untuk menampilkan file-file yang sudah ada di dalam folder uploads.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>Menampilkan gambar gambar yang sudah ada di folder uploads\u003C\u002Fh4>\n\u003Cp>Untuk menampilkan gambar dalam folder upload kita akan menggunakan fungsi \u003Ccode>scandir\u003C\u002Fcode> dan melakukan perulangan untuk setiap gambar untuk ditampilkan dalam div image-place. Ayuk kita tambahan script di bawah ini di bagian paling atas dari file index.php\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\n$dir    = 'uploads\u002F';\n$files = scandir($dir);\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kemudian, di dalam div image-place kita akan tambahkan script di bawah ini untuk menampilkan gambar yang ada dalam folder uploads.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002Ftambahkan di dalam div image-place\n&lt;?php\nforeach ($files as $key =&gt; $img) {\n   if($img != '..' &amp;&amp; $img != '.' )\n\techo '&lt;img src=\"'.$dir.$img.'\" height=\"100\"\u002F&gt;';\n   }\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sekarang coba kita buka file index.php yang sudah di buat di browser kamu, misalnya dengan membuka \u003Ccode>http:\u002F\u002Flocalhost\u002Fajax-upload\u003C\u002Fcode>  Kamu akan melihat tampilan seperti di bawah ini:\u003C\u002Fp>\n\u003Cfigure>\n \u003Cfigcaption>\n\u003Ci>Preview index.php\u003C\u002Fi>\n\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3>upload.php\u003C\u002Fh3>\n\u003Cp>upload.php berfungsi untuk memproses gambar yang sudah kita upload tadi sehingga tersimpan ke dalam folder uploads. \u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\nheader('Content-Type: application\u002Fjson');\nif(isset($_FILES['image']['type'])){\n\t$validextensions = array('jpeg', 'jpg', 'png');\n\t$temporary = explode('.', $_FILES['image']['name']);\n\t$file_extension = end($temporary);\n\tif (\n\t\t(($_FILES['image']['type'] == 'image\u002Fpng') || \n\t\t($_FILES['image']['type'] == 'image\u002Fjpg') || \n\t\t($_FILES['image']['type'] == 'image\u002Fjpeg'))\n\t\t&amp;&amp; \n\t\t\n\t\t($_FILES['image']['size'] &lt; 100000)\u002F\u002FApprox. 100kb files can be uploaded.\n\t\t\n\t\t&amp;&amp; \n\t\t\n\t\tin_array($file_extension, $validextensions)){\n\t\tif ($_FILES['image']['error'] &gt; 0){\n\t\t\t$data = array(\n\t\t\t\t'error' =&gt; $_FILES['image']['error']\n\t\t\t\t);\n\t\t\techo json_encode($data);\n\t\t}else{\n\t\t\t\n\t\t\tif (file_exists('uploads\u002F' . $_FILES['image']['name'])) {\n\t\t\t\t$data = array(\n\t\t\t\t\t'error' =&gt; $_FILES['image']['name'] . ' already exists' \n\t\t\t\t);\n\t\t\t\n\t\t\t\techo json_encode($data);\n\t\t\t\n\t\t\t}else{\n\t\t\t\t\n\t\t\t\t$filename = $_FILES['image']['name'];\n\t\t\t\t$sourcePath = $_FILES['image']['tmp_name']; \u002F\u002F Storing source path of the file in a variable\n\t\t\t\t$targetPath = 'uploads\u002F'.$filename; \u002F\u002F Target path where file is to be stored\n\t\t\t\tmove_uploaded_file($sourcePath,$targetPath) ; \u002F\u002F Moving Uploaded file\n\t\t\t\t\n\t\t\t\t$data = array(\n\t\t\t\t\t'message'\t=&gt; 'Image Uploaded Successfully',\n\t\t\t\t\t'image' \t\t=&gt; $targetPath\n\t\t\t\t);\n\t\t\t\n\t\t\t\techo json_encode($data);\n\t\t\t}\n\t\t}\n\t}else{\n\t\t$data = array(\n\t\t\t'error'\t=&gt; 'Invalid file Size or Type',\n\t\t);\n\t\n\t\techo json_encode($data);\n\t}\n}\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Return dari file upload.php kita akan buat dalam format json supaya lebih gampang untuk di proses nanti dalam file \u003Ccode>main.js\u003C\u002Fcode>\u003C\u002Fp>\n\u003Ch3>main.js\u003C\u002Fh3>\n\u003Cp>Sekarang saatnya kita ngoding javascript agar saat user memilih file lewat form yang sudah kita buat, maka sistem akan otomatis mengupload gambar tersebut dan jika proses upload berhasil maka gambar yang dari di upload akan secara otomatis bertambah di div image-place tersebut. Lets code!\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$(document).ready(function(){\n    var input = $('#image');\n    var form = $('#image-upload');\n    $(input).change(function(){\n\tvar file = this.files[0];\n\tvar imagefile = file.type;\n\tvar match= [\"image\u002Fjpeg\",\"image\u002Fpng\",\"image\u002Fjpg\"];\n\tif(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))\n\t{\n\t\t\u002F\u002Fwrong image format\n\t\talert('Format gambar salah.');\n\t}else{\n\t\tfunction previewFile(file, onLoadCallback){\n\t\t    var reader = new FileReader();\n\t\t    reader.onload = onLoadCallback;\n\t\t    reader.readAsDataURL(file);\n\t\t}\n\t\tpreviewFile(this.files[0], function(e) {\n\t\t    $('#preview').html('');\n\t\t    \u002F\u002F create image preview\n\t\t    var img = $('&lt;img height=\"100\"&gt;'); \n\t\t    img.attr('src', e.target.result);\n\t\t    img.appendTo('#preview');\n\t\t});\n\t\t$(form).submit();\n\t}\t\t\t\t\t\t\n\t\t\t\n    });\n    \u002F\u002F event listener untuk form saat di submit\n    $(form).submit(function(event) {\n        \u002F\u002F mencegah browser mensubmit form.\n\tevent.preventDefault();\n\t\u002F\u002F tampilkan pesan sedang upload\n\t$('.loading').html('Uploading..');\n\t$.ajax({\n\t\ttype: 'POST',\n\t\turl: $(form).attr('action'),\n\t\tdata: new FormData(this), \n\t\tcontentType: false,\n\t\tcache: false,             \n\t\tprocessData:false, \n\t}).success(function(data){\n\t\t\u002F\u002Fdiv preview kita kosongkan lagi\t\t\n\t\t$('#preview').html('');\n\t\t$(form).trigger('reset');\n\t\t\u002F\u002Fmulai memproses respon dari upload.php\n\t\tif(data.error){\n\t\t    $('.loading').html(data.error)\n\t\t}else{\n\t\t    $('.loading').html(data.message)\n\t\t    var img = $('&lt;img height=\"100\"&gt;'); \n\t\t    img.attr('src', data.image);\n\t\t    img.appendTo('#image-place');\n\t\t}\t\t\t\n\t}).error(function(){\n\t\talert('Something wrong..')\n\t});\n    });\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita hampir selesai dengan tutorial kali ini. Mungkin ada sedikit penjelasan lebih detail di bagian ajax saat form tersebut di submit.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>set \u003Ccode>contentType:false\u003C\u002Fcode>, kenapa? Supaya JQuery tidak menambahkan header Content-type saat request berlangung sehingga boundary string tidak hilang\u003C\u002Fli>\n\u003Cli> set \u003Ccode>processData : false\u003C\u002Fcode> Jika tidak di set false maka formData kamu akan menjadi string yang menyebapkan upload file menjadi gagal.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Kita hampir selesai dengan tutorial upload gambar dengan PHP dan JQuery, sekarang saatnya kita mencobanya di browser kesukaan kalian masing-masing. File yang kamu pilih akan secara otomatis ter-upload dan terlist di sebelah bawah.\u003C\u002Fp>\n\u003Cp>Silakan kalian coba dan jika ada pertanyaan bisa isi kolom komentar di bawah. Happy coding!.\u003C\u002Fp>","Tutorial kita kali ini membahas tentang upload gambar dengan menggunakan PHP dan JQuery. JQuery akan digunakan di client side, dimana kita akan membuat proses u",[],[],0]