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");
});
