cara upload file dengan coding ajax sederhana

cara upload file dengan coding ajax sederhana

Hei.. sekarang sudah tahun 2017, dimana teknologi bukan hanya terpusat pada teknologi desktop. Sekarang aplikasi mengarah ke penggunaan Software As a Service yakni aplikasi yang bersifat mobile, multiuser dan flexible. Membangun aplikasi dengan beberapa kriteria diatas tidak semudah ndas mu… ¬†ūüėÄ . Misalnya saja dibangun di PHP ada banyak tutorial, script contoh, framework serta coding standard yang berbeda-beda dalam menerapkan suatu pembangunan aplikasi.

PHP merupakan bahasa berbasis komunitas sehingga untuk aturan coding dan beberapa hal terkati penggunaannya diserahkan sepenuhnya ke komunitas. sehingga sangat berbeda dengan coding berbasis proprietary based dimana coding sudah standar.

Sebenarnya paragraf diatas cuman kalimat pembuka aja, daripada cuman langsung to the point kan ga mesra hehe… Cukup deh kalimat pembukanya. sekarang kita to the point aja deh…

saya akan membagikan cara sederhana untuk mengupload file dengan menggunakan ajax.

berikut script yang harus kalian siapkan.

  1. Script utama uploader berbasis javascript
  2. script ajax sebagai eksekutor uploader
  3. script HTML sebagai user interface atau tampilan dasar aplikasi
  4. script server based uploader dengan PHP.

Script Utama uploader berbasis javascript :

uploader berbasis javascript
 
  1. //https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
  2. //UPLOAD CLASS
  3. var baseUrl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname.split('/')[1];
  4. var Upload = function (file) {
  5.     this.file = file;
  6. };
  7. Upload.prototype.getType = function() {
  8.     return this.file.type;
  9. };
  10. Upload.prototype.getSize = function() {
  11.     return this.file.size;
  12. };
  13. Upload.prototype.getName = function() {
  14.     return this.file.name;
  15. };
  16. Upload.prototype.doUpload = function (attachment_type, form_token, dom) {
  17.     var that = this;
  18.     var formData = new FormData();
  19.   
  20.     // add assoc key values, this will be posts values
  21.     formData.append("file", this.file, this.getName());
  22.     formData.append("upload_file", true);
  23.     formData.append("attachment_type", attachment_type );
  24.     formData.append("form_token", form_token );
  25.     $.ajax({
  26.         type: "POST",
  27.         url: baseUrl + "/your url/php_uploader.php",
  28.         xhr: function () {
  29.             var myXhr = $.ajaxSettings.xhr();
  30.             if (myXhr.upload) {
  31.                 myXhr.upload.addEventListener('progress', that.progressHandling, false);
  32.             }
  33.             return myXhr;
  34.         },
  35.         success: function (data) {
  36.             // your callback here
  37.             $(dom).hide();
  38.             $(dom).prev('.uploadbutton').hide();
  39.             $(dom).next().next(".upload_keterangan").show();
  40.             $(dom).next().next(".upload_keterangan").find('.icon-status-succes').show();
  41.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  42.         },
  43.         error: function (error) {
  44.             // handle error
  45.             $(dom).next().next(".upload_keterangan").show();
  46.                  $(dom).next().next(".upload_keterangan").find('.icon-status-error').show();
  47.             $(dom).next().next(".upload_keterangan").find('.file_name').html(data);
  48.         },
  49.         async: true,
  50.         data: formData,
  51.         cache: false,
  52.         contentType: false,
  53.         processData: false,
  54.         timeout: 60000
  55.     });
  56. };
  57. Upload.prototype.progressHandling = function (event) {
  58.     var percent = 0;
  59.     var position = event.loaded || event.position;
  60.     var total = event.total;
  61.     var progress_bar_id = ".progress-wrp";
  62.     if (event.lengthComputable) {
  63.         percent = Math.ceil(position / total * 100);
  64.     }
  65.     // update progressbars classes so it fits your code
  66.     $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
  67.     $(progress_bar_id + " .status").text(percent + "%");
  68.     if(percent == 100)
  69.     {
  70.           $(progress_bar_id).fadeOut(2000);
  71.           
  72.     }
  73. };

insert file diatas dihalaman HTML nantinya dalam block <script> </script>

 

script ajax sebagai eksekutor uploader

 
 
  1. //lihat disini ada class .upload_input yang akan digunakan sebagai trigger atau pemicu pemanggilan kelas ini
  2. $(document).on('change','.upload_input',function(){
  3.       
  4.     var file = $(this)[0].files[0];
  5.     var upload = new Upload(file);
  6.    
  7.     // may check size or type here with upload.getSize() and upload.getType()
  8.     // execute upload
  9.     upload.doUpload(attachment_type, form_token, this);
  10. });

script tampilan HTML

 
 
  1. //jangan lupa diinsert script diatas ya di halaman HTML ini
  2. <input type="file" name="file_upload" class="upload_input" >

 

PHP uploader

php_uploader.php
 
  1. //http://php.net/manual/en/features.file-upload.post-method.php
  2. <?php
  3. // In PHP versions earlier than 4.1.0, $HTTP_POST_FILES should be used instead
  4. // of $_FILES.
  5. $uploaddir = 'tentukan_directory_mu';
  6. $uploadfile = $uploaddir . basename($_FILES['file_upload']['name']);
  7. echo '<pre>';
  8. if (move_uploaded_file($_FILES['file_upload']['tmp_name'], $uploadfile)) {
  9.     echo "File is valid, and was successfully uploaded.\n";
  10. } else {
  11.     echo "Possible file upload attack!\n";
  12. }
  13. echo 'Here is some more debugging info:';
  14. print_r($_FILES);
  15. print "</pre>";
  16. ?>

Selesai ?

Tentu saja belum mang enak aja… hehe ¬†ūüėõ¬†, yang diatas tersebut cuman script sederhana doang, ga ada pemeriksaan ukuran file yang diupload, pemeriksaan jenis file atau mime, pengamanan terhadap isi file, upload dengan banyak file / multiple file upload, upload berbasis chunk. but…. dengan script sederhana diatas tinggal dikembangin aja bagaimana cara agar bisa mencapai beberapa prinsip keamanan dalam upload file.

sebagai bonus berikut akan dituliskan agar tampilan browse (pada tombol input pemilihan file di tampilan HTML) menjadi tidak boring, maka kita akan menambahkan trigger dengan menggunakan jquery sehingga tampilan pemilihan file akan bebas kita styling sesuai dengan kesukaan ndas mu.

 

Yang kita perlukan adalah.
1. File HTML .

pengaturan style pada file input
 
  1. <div class="uploadbutton btn btn-info btn-xs"><i class="glyphicon glyphicon-paperclip"></i> Pilih file</div>
  2.  
  3. <input type="file" name="form_name" class="upload_input"  id="upload_form"  id="upload" style="visibility:hidden;">

2. Script javascript mentrigger class uploadbutton untuk membuka browser file
ini ndas. .. ¬†ūüėõ

 
 
  1. //to remove ugly button browser html
  2. //hoi jangan lupa ya ini harus ada jquerynya
  3. $(document).on('click','.uploadbutton',function(){
  4.     $(this).next('input[type=file]').click();
  5.  });

akhirnya selesai ?

nda sekarang aku akan menyelesaikan pekerjaan coding ini… ga akan selesai sampai kiamat hahaha

 

Komentari bro

"