Multiple Image upload jquery plugin in codeigniter

business logic part
(in controller)


   public function edit($id)
    {
        $data['product'] = $this->b_product_model->get_product_detail_with_meta($id, DEFAULT_LANG);
        $data['product_master_img']=$this->b_product_model->get_product_master_image($id);
        $data['product_images']=$this->b_product_model->get_all_images_product_detail($id);
        $data['allkategory'] = $this->b_category_model->get_all_category(DEFAULT_LANG); //All kategorie
        $data['js_list'][] = 'edit_product.js';
        $data['js_list'][] = 'custom_file_upload.js';
        $data['js_to_load'] = array('edit_product.js','custom_file_upload.js');
        
        $this->menuOpen->m_product = 1;
        $this->menuOpen->m_product_all = 1;
        $data['menu'] = $this->menuOpen;
        // $this->layout->view('product/edit_revize2', $data);
        $this->layout->view('product/edit_product', $data);
    }


    /**
     * metoda pro editaci hodnot produktu
     * param id:produktu
     */
    public function edit_action()
    {
            $vystup=$this->b_product_model->update_product(DEFAULT_LANG_ID,DEFAULT_LANG);

        /**
         * vrací typ použitého tlačítk a( save,save and close , no save )
         */
            if($vystup==-1){
            redirect(base_url() . 'admin/produkty');
            }else{
            redirect(base_url() . 'admin/produkt/edit/'.$vystup);
            }
    }

html part …
(in view)

<div class="form-group">
    <label class="control-label col-md-3">Product Other Image</label>
    <div class="col-md-9">
        <div id="picture">
            <div style="display:table;">
                <div class="one-photo">
                    <input id="product_other_image[]" class="fileUpload upload" type="file" name="product_other_image[]" multiple/>
                    <div class="removePhoto">x</div>
                    <i class="fa fa-plus" style="    margin-top: 25px;"></i>
                    <div class="preview"></div>
                </div>

            </div>

            <div class="clear"></div>

        </div>

    </div>
</div>

create and external css

#picture {
    /*display: none;*/
    padding: 10px;
    /*/ / background: #d8d8d8;*/
    /*/ / max-height: 510 px;*/
    /*/ / overflow-y: auto;*/
}

.one-photo .fa-plus {
    margin-top: 35px !important;
    position: absolute;
    top: 25px;
    left: 45%;
}

.removePhoto {
    z-index: 100;
    position: absolute;
    text-align: right;
    margin-right: 5px;
    top: 5px;
    right: 5px;
}

.one-photo {
    text-align: center;
    color: #ccc;
    font-size: 13pt;
}
.one-photo {
    width: 130px;
    height: 130px;
    text-align: center;
    margin-top: 10px;
    border: 2px dashed #ccc;
    color: #ccc;
    font-size: 13pt;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
}

.fileUpload {
    z-index: 10;
    margin-top: 0px;
    opacity: 0;
    height: 100px;
    position: absolute;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.preview {
    position: absolute;
    float: left;
    margin-top: -122px;
    width: 130px;
    margin-left: -2px;
    height: 130px;
}

.preview img {
    width: 130px !important;
    height: 130px;
}

create and external javascript file … (assuming jquery and jquery-ui exists)


var nextIndex = 1;

function attachFileReader(fileInput)
{
  if (window.FileReader) {
    var reader = new FileReader();
    reader.onload = function (e) {
      if( $(fileInput).siblings('.preview').html() != "" ){
        // $(fileInput).siblings('.preview').html('');
        $(fileInput).siblings('.preview').html($('<img></img>').attr('src', e.target.result).width(100));
        return;
      }

      $(fileInput).siblings('.preview').append($('<img></img>').attr('src', e.target.result).width(100));
      /*and now add one more*/
      // nextIndex = $('#picture input[type="file"]').size() + 1;
      nextIndex = nextIndex + 1;
      var next = $('<div></div>').addClass('one-photo');
      var preview = $('<div></div>').addClass('preview');
      var icon = $('<i></i>').addClass('fa fa-plus');

      var input = $('<input></input>').attr('type', 'file').addClass('fileUpload').addClass('imageUploads').attr('data-index',nextIndex).attr('name', 'photo[]');
      
      
      var removeThisPicture = $('<div></div>').addClass('removePhoto').html('x').click(function (e)
      {
        if ($('#picture .one-photo').size() > 1) {
          
          if ($(this).parent('.one-photo').children('.preview').html() != "") {
          // if ($('#picture .one-photo .preview').html() != "") {
            // console.log($(this).parent('.one-photo').children('.preview').html());
            console.log($(this).tagName);
            e.preventDefault();
            next.remove();
          }
          
        }else{
          e.preventDefault();
          $('#imageUploads').val('');
          $('#picture').fadeOut(500);
          // $(".one-photo").hide();
        }
      });
      next.append(input);
      next.append(removeThisPicture);
      next.append(icon);
      next.append(preview);
      $(fileInput).parent('.one-photo').after(next);
      input.change(function () {
        attachFileReader(this);
      });
    };
    reader.readAsDataURL($(fileInput) [0].files[0]);
  } 
  else
  {
    var next = $('<div></div>').addClass('one-photo');
    var preview = $('<div></div>').addClass('preview');


    var input = $('<input></input>').attr('type', 'file').addClass('fileUpload').attr('name', 'photo[]');
      

      input.change(function () {
      attachFileReader(this);
    });
      var removeThisPicture = $('<div></div>').addClass('removePhoto').html('x').click(function (e)
      {
        if ($('#picture .one-photo').size() > 1) {
          
          if ($(this).parent('.one-photo').children('.preview').html() != "") {
          // if ($('#picture .one-photo .preview').html() != "") {
            // console.log($(this).parent('.one-photo').children('.preview').html());
            console.log($(this).tagName);
            e.preventDefault();
            next.remove();
          }
          
        }else{
          e.preventDefault();
          $('#imageUploads').val('');
          $('#picture').fadeOut(500);
          // $(".one-photo").hide();
        }
      });
    var icon = $('<i></i>').addClass('fa fa-plus');
    next.append(input);
    next.append(removeThisPicture);
    next.append(icon);
    next.append(preview);
    $(fileInput).parent('.one-photo').after(next);
  }
}

$(document).ready(function ()
{
  $('.removePhoto').click(function ()
  {
    $(this).parent('.one-photo').remove();
  });

  $('.fileUpload').change(function () {
      attachFileReader(this);
    });

});  

now server part php will upload each and every image to the folder..
(in model)


    public function update_product($langid, $lang)
    {
        $this->load->helper('text');


        /* již přiřazené kategorie */
         if(isset($_POST['product_category']) && $_POST['product_category'] != 'un'){
                $id_category = $_POST['product_category'];
         }
         $product_id = $this->input->post('id_product', TRUE);


        $this->product_other_image_upload($product_id, 0);

        return -1;
    }

    public function product_other_image_upload($idproduct, $jeimg = null)
    {
        $num = rand(0,1000);
        
        $sirkaimg = "";
        $vyskaimg = "";
        //get settings pro upload
        $lang = 'CZ';
        $data['general'] = $this->b_setting_model->get_general(DEFAULT_LANG);
        foreach ($data['general'] as $g) {
            if ($g->key == "thumbnail-width") {
                $sirkaimg = $g->value;
            }
            if ($g->key == "thumbnail-height") {
                $vyskaimg = $g->value;
            }
        }
        if (extension_loaded('gd') && function_exists('gd_info')) {
            echo "PHP GD library is installed on your web server";
        } else {
            echo "PHP GD library is NOT installed on your web server";
        }

        if ($_FILES["product_other_image"]["error"][0] == UPLOAD_ERR_OK) {

            $count = count($_FILES['product_other_image']['name']); 

            for($key = 0 ; $key product_thumb($num . $filename, $sirkaimg, $vyskaimg, $num . $filename);
                if ($jeimg == 1) {
                    $this->db->select('f.file_name,f.thumb_name')
                            ->from("file as f");
                    $this->db->where("id_product", $idproduct);
                    $img_kat = $this->db->get();
                    $img_kat_data = $img_kat->row();
                    if ($img_kat_data > 0) {
                        $file_produkt_image = array(
                            "id_file_type" => 'detail_img',
                            "id_product" => $idproduct,
                            "is_active" => 1,
                            "file_name" => "assets/produkt_images/" . $num . $filename,
                            "thumb_name" => "assets/produkt_thumb/" . $num . $filename,
                            "file_description" => 'prodcut other image',
                            "created_by" => 2,
                            'modified_by' => 2
                        );
                        $this->db->where("id_product", $idproduct);
                        $this->db->where("id_file_type", 'detail_img');
                        $this->db->update('file', $file_produkt_image);
                    } else {
                        $file_produkt_image = array(
                            "id_file_type" => 'detail_img',
                            "id_product" => $idproduct,
                            "is_active" => 1,
                            "file_name" => "assets/produkt_images/" . $num . $filename,
                            "thumb_name" => "assets/produkt_thumb/" . $num . $filename,
                            "file_description" => 'prodcut other image',
                            "created_by" => 2,
                            'modified_by' => 2
                        );
                        $this->db->insert('file', $file_produkt_image);
                    }
                } else {
                    $file_produkt_image = array(
                        "id_file_type" => 'detail_img',
                        "id_product" => $idproduct,
                        "is_active" => 1,
                        "file_name" => "assets/produkt_images/" . $num . $filename,
                        "thumb_name" => "assets/produkt_thumb/" . $num . $filename,
                        "file_description" => 'prodcut other image',
                        "created_by" => 2,
                        'modified_by' => 2
                    );
                    $this->db->insert('file', $file_produkt_image);
                }
            }
        }
    }


Advertisements