Simple Ajax image upload

Posted by Unknown On Monday 24 December 2012 14 comments
   
    Our new tutorial on image upload using ajax jquery and php , in this tutorial I am using conventional php image upload with little bit of Ajax and jquery ,in this code snippet upload a pic from disk and replace a div.
Design your HTML form like above to create your dynamic image up loader using Ajax and PHP. Below is the PHP script to upload the image to web directory.



                             
    Upload the Ajaximageupload.js file in the same directory and link it to the html file. (If needed download the example file) upload all the files and run the script.

   While we press upload button Ajax will submit the form Asynchronous without disturbing the status of webpage. Now PHP will get the image from your local directory and start to upload it to the server.

       You can download the example file above and change the parameter according to your requirement.


                                              

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax and PHP image upload</title>
<style type="text/css">
<!--
body,td,th {
 font-family: Georgia,"Times New Roman",Times,serif;;
 font-size: 12px;
 color: #333;
}
body {
 margin-left: 0px;
 margin-top: 30px;
 margin-right: 0px;
 margin-bottom: 0px;
}
.maindiv{ width:640px; margin:0 auto; padding:20px; background:#FFF;}
.innerbg{ padding:6px; background:#FFF;}
.result{ border:solid 1px #CCC; margin:10px 2px; padding:4px 2px;}
.title a{ font-weight:bold; color:#c24f00; text-decoration:none; font-size:14px;}
.discptn a{ text-decoration:none; color:#999;}
.link a{ color:#008000; text-decoration:none;}
-->
</style>
<script type="text/javascript" src="Ajaxfileupload-jquery-1.3.2.js" ></script>
<script type="text/javascript" src="ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="Ajaxfile-upload.css" />
<script type="text/javascript" >
 $(function(){
  var btnUpload=$('#me');
  var mestatus=$('#mestatus');
  var files=$('#files');
  new AjaxUpload(btnUpload, {
   action: 'uploadPhoto.php',
   name: 'uploadfile',
   onSubmit: function(file, ext){
     if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
     mestatus.text('Only JPG, PNG or GIF files are allowed');
     return false;
    }
    mestatus.html('<img src="ajax-loader.gif" height="16" width="16">');
   },
   onComplete: function(file, response){
    //On completion clear the status
    mestatus.text('Photo Uploaded Sucessfully!');
    //On completion clear the status
    files.html('');
    //Add uploaded file to list
    if(response==="success"){
     $('<li></li>').appendTo('#files').html('<img src="images/scriptime_'+file+'" alt="" height="200" width="180" /><br />').addClass('success');
    } else{
     $('<li></li>').appendTo('#files').text(file).addClass('error');
    }
   }
  });
  
 });
</script>

</head>

<body>
<div style="text-align:center;">
<div style="display:none;"><img src="ajax-loader.gif"  /></div>
  <h1 style="color:#000;">PHP Ajax image upload with out refresh.</br><a href="http://www.scriptime.blogspot.in" style="color:#533; text-decoration:none; font-size:18px;">www.scriptime.blogspot.in</a></h1></div>
<div class="maindiv">
<div class="innerbg">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="3" align="left" valign="middle" bgcolor=""><div style="margin:0px 10px; font-weight:bold; color:#000; font-size:16px;"></div></td>
    </tr>
  <tr>
    <td colspan="3" align="left" valign="middle">
    <div id="flash"></div>
    <div id="ajaxresult">
    </div>
    </td>
    </tr>
  <tr>
  <td colspan="3">
        <table width="630" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="180" align="center" valign="middle">
              <div id="me" class="styleall" style=" cursor:pointer;"><span style=" cursor:pointer; font-family:Verdana, Geneva, sans-serif; font-size:12px;"><span style=" cursor:pointer;">  Upload Photo</span></span></div><span id="mestatus" ></span>
              
              
              </td>
        <td width="208" align="center" valign="middle"><div id="files">
              <li class="success">
              </li>
              </div>
              </td>
              <td width="228" align="right" valign="center">&nbsp;</td>
         </tr>      
       </table>
  </td>
  </tr>
  <tr>
    <td colspan="3" align="left" valign="middle">
    </td>
    </tr>
</table>
</div>
</div>
<div style="padding:4px; text-align:right;"></div></body>
</html>


download full code 

 
                           

14 comments:

Unknown said...

If you would like one then just put the following in your comment

Anonymous said...

its works superb bosss...........

Unknown said...

thx.

Anonymous said...

How can I pass the additional parameters along with file?

Unknown said...

How can i send data along with file

Nurrettin2 said...

elazığ
sakarya
zonguldak
adıyaman
antep
FM7NP

DenizKaptanı72 said...

https://titandijital.com.tr/
tunceli parça eşya taşıma
ordu parça eşya taşıma
aydın parça eşya taşıma
van parça eşya taşıma
0BİZ

BinaryNomad1Q2345 said...

edirne evden eve nakliyat
adana evden eve nakliyat
rize evden eve nakliyat
niğde evden eve nakliyat
gümüşhane evden eve nakliyat
CTOHM

StellarPhoenix said...

kayseri evden eve nakliyat
antalya evden eve nakliyat
izmir evden eve nakliyat
nevşehir evden eve nakliyat
kayseri evden eve nakliyat
HL8L2D

8A25DJovanny6D478 said...

12DAC
Balıkesir Evden Eve Nakliyat
Edirne Evden Eve Nakliyat
Trabzon Evden Eve Nakliyat
Ankara Evden Eve Nakliyat
Antalya Evden Eve Nakliyat

0B9B0Linda2AB9B said...

85009
Tekirdağ Ucretsiz Sohbet
canlı sohbet uygulamaları
ordu canlı sohbet
Elazığ Ucretsiz Sohbet
kırklareli mobil sohbet bedava
görüntülü sohbet kızlarla
ücretsiz sohbet sitesi
yozgat sesli sohbet
bayburt rastgele sohbet siteleri

7AEDAHeather78311 said...

EEDC1
Gate io Borsası Güvenilir mi
Youtube Abone Hilesi
Binance Komisyon Ne Kadar
Fuckelon Coin Hangi Borsada
Twitter Takipçi Satın Al
Loop Network Coin Hangi Borsada
Btcturk Borsası Güvenilir mi
Anc Coin Hangi Borsada
Coin Çıkarma

B5F03Diana4313C said...

368BF
ledger live
ledger live web
web bitbox
ledger wallet
arbitrum bridge
web arculus
trust web
trezor
ledger

B3E1BSaanviC1FE6 said...

E695D
Pitbull Coin Hangi Borsada
Periscope Beğeni Hilesi
Parasız Görüntülü Sohbet
Tiktok Beğeni Satın Al
Binance Referans Kodu
Bitcoin Para Kazanma
Instagram Beğeni Satın Al
Threads Takipçi Hilesi
Pi Network Coin Hangi Borsada

Post a Comment

Fashion