Ufdjrw

Could you tell me how i can upload and visualization images without refresh page in php like this picture(for example):

When I click on "+" i can upload the image,and the image is being visualized at the moment(without refresh page).
Here is my php code:

public function create() {
 $this->requireSession();
 $this->load->model('store_model');

 $visible = 0;
 if($this->input->post('is_visible') == 'on') 
 $visible = 1;
 

 $promotion = 0;
 if($this->input->post('is_promotion') == 'on') 
 $promotion = 1;
 

 $internal = 0;
 if($this->input->post('is_internal') == 'on') 
 $internal = 1;
 

 $userId = $this->authorization->getUserId();
 $storeId = $this->authorization->getStore();

 $price = $this->input->post('price');
 $prev_price = $this->input->post('prev_price');
 if($promotion == 1) 
 $price = $this->input->post('prev_price');
 $prev_price = $this->input->post('price');
 

 date_default_timezone_set('Europe/Sofia');

 $data = array( 
 'name' => $this->input->post('name'),
 'description' => $this->input->post('description'),
 'price' => $price,
 'currency' => 'BGN',
 'is_promotion' => $promotion,
 'promotion_price' => $prev_price,
 'quantity' => $this->input->post('quantity'),
 'status' => $this->input->post('status'),
 'main_image' => 0,
 'is_internal' => $internal,
 'is_visible' => $visible,
 'url_address' => $this->input->post('url'),
 'total_views' => 0,
 'total_likes' => 0,
 'total_comments' => 0,
 'product_added' => date("Y-m-d H:i:s"),
 'is_active' => 1,
 'category_id' => $this->input->post('category_id'),
 'user_id' => $this->authorization->getUserId(),
 'store_id' => $storeId,
 'brand_id' => $this->input->post('brand_id')
 );

 $this->db->insert("products", $data);
 $product_id = $this->db->insert_id();

 $this->db->query("UPDATE categories SET total_products = total_products + 1 WHERE id = " . $this->input->post('category_id'));
 $this->db->query("UPDATE stores SET total_products = total_products + 1 WHERE id = " . $storeId);
 $this->db->query("UPDATE users SET total_products = total_products + 1 WHERE id = " . $userId);

 $tags = $this->input->post('tags');
 $this->load->model('tag_model');
 $this->tag_model->updateTags($tags, $product_id);

 $this->load->model('category_model');
 $this->load->model('attribute_model');
 $attributes = $this->category_model->getOnlyAttributes($this->input->post('category_id'));
 $values = array();
 foreach($attributes as $row) 
 $values[] = array('product_id' => $product_id, 'attribute_value_id' => $this->input->post('attribute_id' . $row->attribute_id));
 
 if($attributes) 
 $this->attribute_model->updateProductAttributes($values, $product_id);
 

 if($_FILES["fileToUpload"]["tmp_name"]) 
 $uploadOk = 1;
 //$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
 // Check if image file is a actual image or fake image
 $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
 if($check !== false) 
 $uploadOk = 1;
 else 
 $uploadOk = 0;
 
 // Check file size
 if ($_FILES["fileToUpload"]["size"] > 500000) 
 $uploadOk = 0;
 
 // Allow certain file formats
 /*if($imageFileType != "jpg") 
 $uploadOk = 0;
 */
 // Check if $uploadOk is set to 1
 if ($uploadOk == 1) 
 $this->db->insert('products_images', array('product_id' => $product_id));
 $insert = $this->db->insert_id();

 $target_dir = "./" . p_image_path();
 $target_file = $target_dir . '/' . $insert . '.jpg';
 move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
 $this->db->update("products", array('main_image' => $insert), array('id' => $product_id));

 
 

 redirect(site_url('mystore/products/edit/' . $product_id));

Here is my html code:

<div class="item-card">
 <div class="card-section">
 <div class="clearfix">
 <!---<div class="pull-right">
 <input type="file" name="fileToUpload" id="fileToUpload">
 </div>---->

 <div class="pull-right">
 <span class="btn btn-white upload_image" type="file" id="fileToUpload">Upload image</span>
 <input class="upload_file" type="file" name="fileToUpload" id="fileToUpload" style="display:none;">
 </div>

 <h2 class="al">Images</h2>
 </div>
 <hr />
 <div class="item-images clearfix">
 <div class="empty-text">
 Upload images
 </div>
 </div>
 </div>
 </div>

And div class when the images will be show:

<script type="text/template" id="tpl-product-image">
 <div class="col-sm-6 col-md-4 item-thumb" data-idx="fileId">
 <div class="image-holder thumbnail">
 <div class="preview">
 <img src="fileUrl" />
 </div>
 <div class="caption clearfix">
 <label class="pull-left">
 #is_main
 <input type="checkbox" class="uniform check-main" data-idx="fileId" checked />
 /is_main
 ^is_main
 <input type="checkbox" class="uniform check-main" data-idx="fileId" />
 /is_main
 Заглавна
 </label>
 <button class="remove-image btn btn-white pull-right" data-idx="fileId">
 <i class="glyphicon glyphicon-trash"></i>
 </button>
 </div>
 </div>
 </div>
</script>

and JQUERY:

$('.upload_image').click(function() 
 $(".upload_file").trigger("click"); 
 );

The key to this is using the AJAX feature in the jquery library

Download the scripts given below from jquery site.

Use the AjaxUpload function.
Follow this tutorial for further details : https://css-tricks.com/ajax-image-uploading/

use change event, then get the file and send to PHP file
like below

 $('#fileToUpload').on("change", function () 
 var file = $("#fileToUpload").prop("files")[0];
 var data = new FormData();
 data.append('fileName', file);
 );
 $.ajax(
 url: "urlPHPFILE",
 type: "POST",
 data: data,
 dataType : 'json',
 processData: false,
 contentType: false,
 cache: false,
 success:function(data)

 ,
 error:function(err)
 console.error(err);
 
 );

php file

$file = $_POST['fileName']

after upload, if you want to do something you must use the success function

in PHP file you must back Url patch image .and get in on success function.

PHP file

.
.//If the file was successfully uploaded
 $status = array('status' => "success", "urlPatchImage" => $UrlPatch);
 return $status;
.
.
.

jquery code

.
 success:function(data)
 var urlPatchImage = data.urlPatchImage;
 $("#image").attr("src", urlPatchImage );
 ,
.
.

html

<img id="image" src="">