Upload File Tanpa Merefresh Halaman Web

Assalamu'alaikum wr. wb

Hello Sahabat Pelangi semunya . . . :)
Semoga dalam kesempatan kali ini Sahabat Pelangi semua dalam keadan sehat dan slalu dalam lindungan-Nya. Amin Ya Rabb . . .  :)

Udah lama ya saya nggak ngeblog . . . kemaren menyibukkan diri dengan sedikit kegiatan . . . heheheeh.
Kali ini saya ingin berbagi dengan sahabat pelangi bagaimana membuat upload file tanpa merefresh halaman web. Sebelumnya saya juga kesulitan dengan hal ini, namun selagi kita masih terkoneksi ke internet jangan bingung, langsung saja browsing dan mengembara di dunia lain heheheh . . . Insha allah sahabat pelangi akan temukan apa yang sahabat inginkan . . . Apa sih yang nggak ada di internet?? Hampir semuanya ada di internet. Eiiiitssss . . . Jangan cari nggak-nggak ya . . . hehehe . . .

Nah, sahabat pelangi semua, berikut coding program untuk membuat Upload File tanpa refresh halaman web.

Code PHP :

<?php
$upload_location = "upload_folder/";
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
      $name = $_FILES['vasPhoto_uploads']['name'];
      $size = $_FILES['vasPhoto_uploads']['size'];

      $allowedExtensions = array("jpg","jpeg","gif","png"); 
      foreach ($_FILES as $file) {
      if ($file['tmp_name'] > '' && strlen($name)) {
      if (!in_array(end(explode(".", strtolower($file['name']))), $allowedExtensions)) {
            echo '<div class="notice" style="width:500px;">Sorry, you attempted to upload an invalid file format. <br>Only jpg, jpeg, gif and png image files are allowed. Thanks.</div><br clear="all" />';
      }
      else {
            if($size<(1024*1024))
            {
                  $actual_image_name = "default".'.gif'; // This could be a random name such as rand(125678,098754).'.gif'; but i have used a default name just for demo purpose
                  $dirnameas = $upload_location.$actual_image_name; //Get and delete old image file before uploading a new one if necessary by you otherwise, remove this
                  @chmod($dirnameas,0777);
                  @unlink($dirnameas);

                  if(move_uploaded_file($_FILES['vasPhoto_uploads']['tmp_name'],$upload_location.$actual_image_name)) {
                        //Run your SQL Query here to insert the new image file named $actual_image_name if you deem it necessary
                        echo '<span class="uploadeFileWrapper"><img src="'.$upload_location.$actual_image_name.'" width="150" height="100"></span><br clear="all" /><br clear="all" />';
                  }
                  else {
                        echo "<div class='notice' style='width:500px;'>Sorry, Your Image File could not be uploaded at the moment. <br>Please try again or contact the site admin if this problem persist. Thanks.</div><br clear='all' />";
                  }
            }
            else {
                  echo "<div class='notice' style='width:400px;'>File exceeded 1MB max allowed file size. <br>Please upload a file at 1MB in size to proceed. Thanks.</div><br clear='all' />";
            }
      }
}
else {
      echo "<div class='notice' style='width:400px;'>You have just canceled your file upload process. Thanks.</div><br clear='all' />";
}
}
}

?>

Ajax dan jQuery :

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="file_uploads.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
      $('#vasPhoto_uploads').live('change', function() {
           $("#vasPLUS_Programming_Blog_Form").vPB({
            beforeSubmit: function() {
                  $("#vasPhoto_uploads_Status").show();
                  $("#vasPhoto_uploads_Status").html('');
                  $("#vasPhoto_uploads_Status").html('<div style="" align="center"><font style="font-family: Verdana, Geneva, sans-serif; font-size:12px; color:black;">Upload</font> <img src="loading.gif" alt="Upload...." align="absmiddle" title="Upload...."/></div><br clear="all">');
            },
            url: 'vasPLUSfileUploads.php',
            success: function(response) {
                  $("#vasPhoto_uploads_Status").html($(response).fadeIn(2000));
            }
      }).submit();
      }); 
}); 
</script>

Code HTML :

<center>
<div align="left" style="width:600px; border:8px solid #F6F6F6;padding:10px;">
<br clear="all" />

<div id="vasPhoto_uploads_Status" align="center" style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black; line-height:25px;"></div>
<center>
<div style="width:350px" align="center">
<form id="vasPLUS_Programming_Blog_Form" method="post" enctype="multipart/form-data" action="javascript:void(0);" autocomplete="off">
<div style="padding:10px; padding-top:18px;float:left;font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black; width:100px;" align="left">Browse Photo:</div>
<div style="padding:10px;float:left; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black; width:200px;" align="left">
<div class="vasplusfile_adds"><input type="file" name="vasPhoto_uploads" id="vasPhoto_uploads" style="opacity:0;-moz-opacity:0;filter:alpha(opacity:0);z-index:9999;width:90px;padding:5px;cursor:default;" /></div>
</div><br clear="all">
</form>
</div>
</center>
<br clear="all" />
</div>
</center>

Nah, itu dia koding programnya sahabat . . .
Silahkan download disini.

Live demonya disini.

Untuk informasi lebih lengkap yuk gabung di www.vasplus.info

Sumber : www.vasplus.info