SOAP with WSDL in PHP

By | August 1st 2018 02:23:04 AM | viewed 401 times

SOAP with WSDL - Server Side CRUD Script:

First in php.ini file enable: extension=php_soap.dll

file url:http://localhost/soap/db.php

<?php
	class Db {
	    private $host = "localhost";
	    private $user = "root";
	    private $pass = "";
	    private $db   = "webservice";
	    private $mysql;
		
	    public function __construct(){
			 $this->mysql = mysql_connect($this->host,$this->user,$this->pass);
	        if (! $this->mysql) {
	            die('Connect Error :'.mysql_error());
	        }else{
			    mysql_select_db($this->db);
			}
	    }

	    public function insert($data){
	       
			$path =  null;
              
			 $sql = "SELECT g.id, g.thumb_path,g.title,g.active,g.web_section_id,s.section_name,g.web_category_id,c.category_name FROM web_image_gallerys g LEFT JOIN web_sections s ";
			 $sql .= "ON g.web_section_id = s.id LEFT JOIN web_categorys c ";
			 $sql .= "ON g.web_category_id = c.id ";			 
				 if($data['web_section_id'] && $data['web_category_id']){
						 $sql .= "where g.web_section_id={$data['web_section_id']} and g.web_category_id={$data['web_category_id']} order by g.id desc limit 1";
				 }else if($row['section_name'] && ! $row['category_name']){
						 $sql .= "where g.web_section_id={$data['web_section_id']} order by g.id desc limit 1";
				 }
             $q = mysql_query($sql,$this->mysql);
			 
			 $pathInfo = mysql_fetch_object($q, 'Db');
          
			 if($data['web_section_id'] && $data['web_category_id']){
						 $path = $_SERVER['DOCUMENT_ROOT']."/soap/images/upload/gallery/{$pathInfo->section_name}/{$pathInfo->category_name}/{$data['file_name']}";
			 }else if($row['section_name'] && ! $row['category_name']){
						 $path = $_SERVER['DOCUMENT_ROOT']."/soap/images/upload/gallery/{$pathInfo->section_name}/{$data['file_name']}";
			 }

			
			if(! copy($data['tmp_path'],$path)) {
				 return false;
			}

			 $sqlIn ="INSERT INTO web_image_gallerys (id,title, thumb_path,web_section_id,web_category_id,active) VALUES ('','$data[fup_title]','$data[file_name]','$data[web_section_id]','$data[web_category_id]','$data[fup_active]')";
			 
			 $insert = mysql_query($sqlIn,$this->mysql);
              
			 if($insert){
			  mysql_close($this->mysql);
			   return true;
			 }else{
			    mysql_close($this->mysql);
			    return false;
			 }
			 
			

	    }

	    public function update($data){
		
		     $path =  null;
              
			 $sql = "SELECT g.id, g.thumb_path,g.title,g.active,g.web_section_id,s.section_name,g.web_category_id,c.category_name FROM web_image_gallerys g LEFT JOIN web_sections s ";
			 $sql .= "ON g.web_section_id = s.id LEFT JOIN web_categorys c ";
			 $sql .= "ON g.web_category_id = c.id ";			 
				 if($data['web_section_id'] && $data['web_category_id']){
						 $sql .= "where g.web_section_id={$data['web_section_id']} and g.web_category_id={$data['web_category_id']} order by g.id desc limit 1";
				 }else if($row['section_name'] && ! $row['category_name']){
						 $sql .= "where g.web_section_id={$data['web_section_id']} order by g.id desc limit 1";
				 }
             $q = mysql_query($sql,$this->mysql);
			 
			 $pathInfo = mysql_fetch_object($q, 'Db');
          
			 if($data['web_section_id'] && $data['web_category_id']){
						 $path = $_SERVER['DOCUMENT_ROOT']."/soap/images/upload/gallery/{$pathInfo->section_name}/{$pathInfo->category_name}/{$data['file_name']}";
			 }else if($row['section_name'] && ! $row['category_name']){
						 $path = $_SERVER['DOCUMENT_ROOT']."/soap/images/upload/gallery/{$pathInfo->section_name}/{$data['file_name']}";
			 }
 
			if(! $data['tmp_path'] && ! copy($data['tmp_path'],$path)) {
				 return false;
			}

			 $sql = "UPDATE web_image_gallerys\n";
			 $sql .= "SET title='$data[fup_title]',\n";
			 $sql .= "thumb_path='$data[file_name]',\n";
             $sql .= "web_section_id='$data[web_section_id]',\n";
			 $sql .= "web_category_id='$data[web_category_id]',\n";
			 $sql .= "active='$data[fup_active]'\n";
			 $sql .= "WHERE id='$data[id]'";

			 $update = mysql_query($sql,$this->mysql);
              
			 if($update){
			    mysql_close($this->mysql);
			    return true;
			 }else{
			     mysql_close($this->mysql);
			    return false;
			 }
	    }

	    public function delete($id){
		       $sql = "DELETE FROM web_image_gallerys WHERE id=$id";
			   
				if(mysql_query($sql,$this->mysql)){
				  return true;
				}else{
				  return false;
				}

	    }

	    public function getAll(){
		

	         $path = null;
			 $sql = "SELECT g.id, g.thumb_path,g.title,g.active,g.web_section_id,s.section_name,g.web_category_id,c.category_name FROM web_image_gallerys g LEFT JOIN web_sections s ";
			 $sql .= "ON g.web_section_id = s.id LEFT JOIN web_categorys c ";
			 $sql .= "ON g.web_category_id = c.id ";
			 $sql .= "where 1=1 order by g.id desc";
             $q = mysql_query($sql,$this->mysql);
			 $result = array();
		    while($row = mysql_fetch_array($q)) {

			    if($row['section_name'] && $row['category_name']){
					$path ='http://localhost/soap/images/upload/gallery/'.$row['section_name'].'/'.$row['category_name'].'/'.$row['thumb_path'];
				}else if($row['section_name'] && ! $row['category_name']){
					$path = 'http://localhost/soap/images/upload/gallery/'.$row['section_name'].'/'.$row['thumb_path'];
				}
		       $result[] = array(
		                    'id'=>$row['id'],
		                    'title'=>$row['title'],
							'section_name'=>$row['section_name'],
							'category_name'=>$row['category_name'],
							'thumb_path'=>$path,
		                    'active'=>$row['active']
		        );
		    }
			 mysql_close($this->mysql);
			return $result;
	    }

	    public function getById($id){
	         $path = null;
			 $sql = "SELECT g.id, g.thumb_path,g.title,g.active,g.web_section_id,s.section_name,g.web_category_id,c.category_name FROM web_image_gallerys g LEFT JOIN web_sections s ";
			 $sql .= "ON g.web_section_id = s.id LEFT JOIN web_categorys c ";
			 $sql .= "ON g.web_category_id = c.id ";
			 $sql .= "where g.id={$id} order by g.id desc";
			 
             $q = mysql_query($sql,$this->mysql);
			
			 $result = array();
			 
		    while($row = mysql_fetch_array($q)) {
			 

			    if($row['section_name'] && $row['category_name']){
					$path ='http://localhost/soap/images/upload/gallery/'.$row['section_name'].'/'.$row['category_name'].'/'.$row['thumb_path'];
				}else if($row['section_name'] && ! $row['category_name']){
					$path = 'http://localhost/soap/images/upload/gallery/'.$row['section_name'].'/'.$row['thumb_path'];
				}
		       $result[] = array(
		                    'id'=>$row['id'],
		                    'title'=>$row['title'],
							'web_section_id'=>$row['web_section_id'],
							'section_name'=>$row['section_name'],
							'category_name'=>$row['category_name'],
							'web_category_id'=>$row['web_category_id'],
							'thumb_path'=>$path,
		                    'active'=>$row['active']
		        );
		    }
			 mysql_close($this->mysql);
			return $result[0];
	    }

	}


?>

create a wsdl file in the location :http://localhost/soap/soapwithwsdl.wsdl


<?xml version="1.0" encoding="windows-1252"?>
<definitions xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:tns="soapwithwsdl" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/" targetNamespace="soapwithwsdl">
<types>
<xsd:schema targetNamespace="soapwithwsdl">
 <xsd:import namespace="http://schemas.xmlsoap.org/soap/encoding/"/>
 <xsd:import namespace="http://schemas.xmlsoap.org/wsdl/"/>
 
 <xsd:complexType name="responseMsg">
  <xsd:all>
   <xsd:element name="status" type="xsd:string"/>
   <xsd:element name="message" type="xsd:string"/>
  </xsd:all>
 </xsd:complexType>
 
  <xsd:complexType name="data">
  <xsd:complexContent>
   <xsd:restriction base="SOAP-ENC:Array">
    <xsd:attribute ref="SOAP-ENC:arrayType" wsdl:arrayType="xsd:string[]"/>
   </xsd:restriction>
  </xsd:complexContent>
 </xsd:complexType>
 
</xsd:schema>
</types>

 <message name="LoginRequest">
        <part name="login" type="xsd:string"/>
        <part name="password" type="xsd:string"/>
</message>

<message name="LoginResponse">
	<part name="result" type="xsd:string"/>
</message>

<message name="getAllRequest">
  <part name="which" type="xsd:string"/>
</message>

<message name="getAllResponse">
  <part name="return" type="tns:getAll"/>
</message>

<message name="getByIdRequest">
  <part name="which" type="xsd:string"/>
</message>

<message name="getByIdResponse">
  <part name="return" type="tns:getById"/>
</message>

<message name="updateRequest">
  <part name="which" type="xsd:data"/>
</message>

<message name="updateResponse">
  <part name="return" type="tns:update"/>
</message>

<message name="insertRequest">
  <part name="which" type="xsd:data"/>
</message>

<message name="insertResponse">
  <part name="return" type="tns:insert"/>
</message>

<message name="deleteRequest">
  <part name="which" type="xsd:string"/>
</message>

<message name="deleteResponse">
  <part name="return" type="tns:delete"/>
</message>

<portType name="soapwithwsdlPortType">
   <operation name="login">
            <input message="tns:LoginRequest"/>
            <output message="tns:LoginResponse"/>
   </operation>
   <operation name="getAll">
  	<input message="tns:getAllRequest"/>
    <output message="tns:getAllResponse"/>
  </operation>
  
   <operation name="getById">
  	<input message="tns:getByIdRequest"/>
    <output message="tns:getByIdResponse"/>
  </operation>
    <operation name="update">
  	<input message="tns:updateRequest"/>
    <output message="tns:updateResponse"/>
  </operation>
   <operation name="insert">
  	<input message="tns:insertRequest"/>
    <output message="tns:insertResponse"/>
   </operation>
    <operation name="delete">
  	<input message="tns:deleteRequest"/>
    <output message="tns:deleteResponse"/>
  </operation>
</portType>

<binding name="soapwithwsdlBinding" type="tns:soapwithwsdlPortType">
  <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
  
  <operation name="login">
            <soap:operation soapAction="urn:soapwithwsdl"/>
            <input>
                <soap:body use="encoded" namespace="urn:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
            </input>
            <output>
                <soap:body use="encoded" namespace="urn:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
            </output>
        </operation>
		
  <operation name="getAll">
    <span><soap:operation soapAction="uri:soapwithwsdl/getAll" style="rpc"/>
    <input><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
    <operation name="getById">
    <soap:operation soapAction="uri:soapwithwsdl/getById" style="rpc"/>
    <input><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
  <operation name="update">
    <soap:operation soapAction="uri:soapwithwsdl/update" style="rpc"/>
    <input><<soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
  <operation name="insert">
    <soap:operation soapAction="uri:soapwithwsdl/insert" style="rpc"/>
    <input><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
   <operation name="delete">
    <soap:operation soapAction="uri:soapwithwsdl/delete" style="rpc"/>
    <input><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></input>
    <output><soap:body use="encoded" namespace="uri:soapwithwsdl" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/></output>
  </operation>
</binding>

<service name="soapwithwsdl">
  <port name="soapwithwsdlPort" binding="tns:soapwithwsdlBinding">
    <soap:address location="http://localhost/soap/server.php"/>
  </port>
</service>
</definitions>

file url:http://localhost/soap/server.php

<?php
ini_set( "soap.wsdl_cache_enabled", 0 );
ini_set( 'soap.wsdl_cache_ttl', 0 );

$dbInstance = new Db();

//$server = new SoapServer("http://localhost/soap/soapwithwsdl.wsdl");
  // or
$server = new SoapServer('soapwithwsdl.wsdl',array('uri'=>"http://localhost/soap/server.php"));



function login($user, $password ){
  if($user == 'ukm' && $password =='test'){
     return "success";
	 
  }else{
    false;
  }
}

function getAll( $params ){
 global $dbInstance;
 
   $result = $dbInstance->getAll();
   return $result;   
}

function getById( $params ){
 global $dbInstance;
 
   $result = $dbInstance->getById($params);
   return $result;   
}

function update( $params ){

   global $dbInstance;
   $result = $dbInstance->update($params);
   return $result;   
}

function insert( $params ){

   global $dbInstance;
   $result = $dbInstance->insert($params);
   return $result;   
}

function delete( $params ){
 global $dbInstance;
 
   $result = $dbInstance->delete($params);
   return $result;   
}


$server->addFunction("login");
$server->addFunction("getAll");
$server->addFunction("getById");
$server->addFunction("update");
$server->addFunction("insert");
$server->addFunction("delete");
$server->handle();

?>

SOAP with WSDL - Client Side Script:

file url:http://localhost/soapclient/client.php

<?php

 ini_set('soap.wsdl_cache_enabled', false);
try {
 $client = new SoapClient("http://localhost/soap/soapwithwsdl.wsdl");
   // or
 //$client = new SoapClient("http://localhost/soap/soapwithwsdl.wsdl", array('trace' => 1));
  $responseLogin = $client->__soapCall( 'login',array('ukm', 'test')); // call login() from .wsdl

		 if( ! $responseLogin == "success") {
		      echo "Authentcation required";
		  }
  
} catch ( SoapFault $sf ) {
  echo $sf->getMessage();
}
//print_r($client);die;

?>

file url:http://localhost/soapclient/list.php

<?php

<?php 
include __dir__.'/client.php';
 $requestIns = $client->__soapCall('getAll',array());
 //print_r($requestIns);die;
 


?>
   
     <html>
     <title>upload</title>
     <head >
	 <link href="bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		


<script>
 function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
 
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    var dd = reader.readAsDataURL(file);
  }
}


</script>

<script>
  jQuery(function(){
	
	jQuery('#ukm').change( function(event) {
		 var tmppath = URL.createObjectURL(event.target.files[0]);
		    
			jQuery("img").fadeIn("fast").attr('src',tmppath);
			
			alert(json.stringfy(event.target.files[0]));
		
	});
	
  });  
</script>

</head>	
<body>
	 
<div class="panel panel-success">
              <div class="panel-heading">New Gallery</div>
              
              <div class="panel-body">
                  

 
<?php
 
 if( $requestIns){

?>
 <table class="table">
  <caption> By Built-in SoapClient with WSDL</caption>
   <tr>
	    <th>Title</th>
		<th>Image</th>
		<th>action</th>
    </tr>
<?php

  
  foreach($requestIns as  $resp){
    echo'<tr>';
	  echo'<td>'.$resp['title'].'</td>';
      echo'<td><img style="width:100px;" src="'.$resp['thumb_path'].'"></td>';
	  $edit ="http://localhost/soapclient/edit.php?id=".$resp['id']."";
	  $delete ="http://localhost/soapclient/insertUpdate.php?delete=d&id=".$resp['id']."";
	  $add ="http://localhost/soapclient/upload.php";
	  echo"<td><a class='btn btn-sm btn-primary' href=".$edit.">edit</a>";
	  echo"<a class='btn btn-sm btn-warning' href=".$delete.">delete</a>";
	  echo"<a class='btn btn-sm btn-warning' href=".$add.">Add</a></td>";
    echo'</tr>';
     }	

 echo'<table>';
 }
 
?>
 
			    </div>
			</div>
		</body>
</html>	



file url:http://localhost/soapclient/edit.php

<?php
include __dir__.'/client.php';
$galleryIns = null;
?>  
   <html>
    <title>upload</title>
    <head>
	    <link href="bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet" type="text/css" >
		  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		


<script>
 function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
 
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    var dd = reader.readAsDataURL(file);
	getFilePath();
  }
}

function getFilePath(){
         var file    = document.querySelector('input[type=file]').files[0];
         var filePath=jQuery('#ukm').val(); 
		  var path = (window.URL || window.webkitURL).createObjectURL(file);
		  const reader = new FileReader();
		 alert(reader.readAsText(path));
    
}
</script>

<script>
  jQuery(function(){
	
	jQuery('#ukm').change( function(event) {
		 var tmppath = URL.createObjectURL(event.target.files[0]);
		    
			jQuery("img").fadeIn("fast").attr('src',tmppath);
			
			alert(json.stringfy(event.target.files[0]));
		
	});
	
  });  
 </script>

</head>	
<body>
	
<?php

   $id = $_GET['id'];
  
    $galleryIns = $client->__soapCall("getById", array('id'=>$id));
	
 if($galleryIns){

?> 
	 <div class="panel panel-success">
              <div class="panel-heading">Update Gallery</div>

              <div class="panel-body">
                  
                        <form class="form-horizontal" role="form" method="POST" action="http://localhost/soapclient/insertUpdate.php" enctype="multipart/form-data">     
                        <div class="form-group col-md-4">
                                                    
							<label>Web Section</label>
							<div>
							  <select name="web_section_id" class="form-control" value="">
							  <option value="39">Image Gallery</option>
							  </select>
							</div>
						</div>
                                                
                     <div class="form-group col-md-4">
                                                    
							<label>Web Category</label>
							<div>
							
							 <select name="web_category_id" class="form-control" value="">
							    <option value="20">Image Gallery</option>
							</select>
	
							</div>
						</div>
                                                
                                 <div class="col-md-12 col-lg-12 cls">
		                               <div class="form-group col-md-4">
		                                    <label>Upload File</label>
				                           <div>
										    <input type="file" name="fup_ukmFile" id="ukm"  accept=".gif,.jpg,.jpeg,.png" onchange="previewFile()">
                                           
                                              <img src="" height="200" alt="Image preview...">

				                           </div>
                                        </div>
            
						                <div class="form-group col-md-4">
						                         <label>Title</label>
						                         <div>
						                         <input type="hidden" name="id" value=""/>
												 
						                         <input type="text" pattern="^[A-Za-z_-\\]{5,50}" class="form-control" id="fup_title" name="fup_title" value="">

						                         </div>
						                 </div>

                  
						                 <div class="form-group col-md-4">
						                         <label>Is Publish</label>
						                         <div>
						                                
														  <select name="fup_active" class="form-control" value="">
							                                <option value="1">Publish</option>
															<option value="0">Unpublish</option>
							                              </select>
						                         </div>
						                 </div>

                                 </div>
                           
                                <div class="form-group">
                                        <div class="col-md-12" align="center">
										       <input type="hidden" name="update" value="update"/>
											   
                                                <button type="submit" class="btn btn-primary">
                                                        Submit
                                                </button>
                                        </div>
                                </div>
                        </form>

                  
                  
			    </div>
			</div>
		</body>
		
<?php
  }
?>
</html>	

file url:http://localhost/soapclient/insertUpdate.php


<?php 
include __dir__.'/client.php';
$requestIns = null;

 if(@$_POST['update']=='update'){
  
		    $data = array(
			         'id'=>$_POST['id'],
			         'web_category_id'=>$_POST['web_category_id'],
					 'web_section_id'=>$_POST['web_section_id'],
					 'fup_ukmFile'=>$_FILES['fup_ukmFile']["tmp_name"],
					 'tmp_path'=>$_FILES['fup_ukmFile']["tmp_name"],
					 'file_name'=>$_FILES['fup_ukmFile']["name"],
					 'type'=>$_FILES['fup_ukmFile']["type"],
					 'size'=>$_FILES['fup_ukmFile']["size"],
					 'fup_title'=>$_POST['fup_title'],
					 'fup_active'=>$_POST['fup_active']
			);
              
				 if($client->__soapCall("update", [$data])){
					return header("Location: http://localhost/soapclient/list.php", true, 301);
				 }else{
					header("Location: http://localhost/soapclient/edit.php?id=".$_POST['id']."", true, 301);
				 }
				 
				 

  }else if($_POST['insert']=='insert'){

			   $data = array(
				         'web_category_id'=>$_POST['web_category_id'],
						 'web_section_id'=>$_POST['web_section_id'],
						 'fup_ukmFile'=>$_FILES['fup_ukmFile']["tmp_name"],
						 'tmp_path'=>$_FILES['fup_ukmFile']["tmp_name"],
						 'file_name'=>$_FILES['fup_ukmFile']["name"],
						 'type'=>$_FILES['fup_ukmFile']["type"],
						 'size'=>$_FILES['fup_ukmFile']["size"],
						 'fup_title'=>$_POST['fup_title'],
						 'fup_active'=>$_POST['fup_active']
				);
				  
				  
				if($client->__soapCall("insert", [$data])){
					return header("Location: http://localhost/soapclient/list.php", true, 301);
				 }else{
					header("Location: http://localhost/soapclient/upload.php", true, 301);
				 }
  
  
  }else if($_GET['delete']=='d'){

				 if($client->__soapCall("delete",array('id'=>$_GET['id']))){
					return header("Location: http://localhost/soapclient/list.php", true, 301);
				 }else{
				   return header("Location: http://localhost/soapclient/list.php", true, 301);
				 }
  }
  
  


 
  
  ?>

file url:http://localhost/soapclient/upload.php


   <html>
    <title>upload</title>
    <head>
	    <link href="bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
		  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		


<script>
 function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
 
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    var dd = reader.readAsDataURL(file);
  }
}

</script>

<script>
  jQuery(function(){
	
	jQuery('#ukm').change( function(event) {
		 var tmppath = URL.createObjectURL(event.target.files[0]);
		    
			jQuery("img").fadeIn("fast").attr('src',tmppath);
			
			alert(json.stringfy(event.target.files[0]));
		
	});
	
  });  
  </script>	

	</head>	
	<body>
	 
	 <div class="panel panel-success">
              <div class="panel-heading">New Gallery</div>
              
              <div class="panel-body">
                  
                        <form class="form-horizontal" role="form" method="POST" action="http://localhost/soapclient/insertUpdate.php" enctype="multipart/form-data">      
                        <div class="form-group col-md-4">
                                                    
							<label>Web Section</label>
							<div>
							  <select name="web_section_id" class="form-control" value="">
							  <option value="39">Image Gallery</option>
							  </select>
							</div>
						</div>
                                                
                     <div class="form-group col-md-4">
                                                    
							<label>Web Category</label>
							<div>
							
							 <select name="web_category_id" class="form-control" value="">
							    <option value="20">Image Gallery</option>
							</select>
	
							</div>
						</div>
                                                
                                 <div class="col-md-12 col-lg-12 cls">
		                               <div class="form-group col-md-4">
		                                    <label>Upload File</label>
				                           <div>
										    <input type="file" name="fup_ukmFile" id="ukm"  accept=".gif,.jpg,.jpeg,.png" onchange="previewFile()">
                                           
                                              <img src="" height="200" alt="Image preview...">

				                           </div>
                                        </div>
            
						                <div class="form-group col-md-4">
						                         <label>Title</label>
						                         <div>
						                         <input type="text" pattern="^[A-Za-z_-\\]{5,50}" class="form-control" id="fup_title" name="fup_title" value="">
						                         </div>
						                 </div>

                  
						                 <div class="form-group col-md-4">
						                         <label>Is Publish</label>
						                         <div>
						                                
														  <select name="fup_active" class="form-control" value="">
							                                <option value="1">Publish</option>
															<option value="0">Unpublish</option>
							                              </select>
						                         </div>
						                 </div>

                                 </div>
                           
                                <div class="form-group">
                                        <div class="col-md-12" align="center">
										       <input type="hidden" name="insert" value="insert"/>
                                                <button type="submit" class="btn btn-primary">
                                                        Submit
                                                </button>
                                        </div>
                                </div>
                        </form>

                  
                  
			    </div>
			</div>
		</body>
</html>	
  
bONEandALL