upload image through ajax jquery php codeigniter

    public function save_product_detail_image($idproduct)
    {
        if (isset($_POST['image'])) {

            $imageData = $_POST['image'];

            list($type, $imageData) = explode(';', $imageData);
            list(,$extension) = explode('/',$type);
            list(,$imageData)      = explode(',', $imageData);
            $fileName = uniqid().'.'.$extension;
            $imageData = base64_decode($imageData);
            file_put_contents('assets/produkt_images0/'.$fileName, $imageData);

            if ($_POST['id_file_type'] == "master_img") {

                $this->db->where("id_product", $idproduct)
                ->where('id_file_type', 'master_img')
                ->delete('file');
            }
            else if ($_POST['id_file_type'] == "product_featured_img") {

                $this->db->where("id_product", $idproduct)
                ->where('id_file_type', 'product_featured_img')
                ->delete('file');
            }

            $file_produkt_image = array(
                "id_file_type" => $_POST['id_file_type'],
                "id_product" => $idproduct,
                "is_active" => 1,
                "file_name" => "assets/produkt_images0/" . $fileName,
                "thumb_name" => "assets/produkt_thumb0/" . $fileName,
                "file_description" => 'hl. obrazek produktu',
                "created_by" => 2,
                'modified_by' => 2
            );

            $this->db->insert('file', $file_produkt_image);

            return $fileName;
 
        }
    }
Advertisements

Ajax Search PHP through MySQL record


var searchRequest = null;

$(function () {
    var minlength = 3;

    $("#spedostech_search").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();

            console.log( );
            // return;
            
            searchRequest = $.ajax({
                type: "GET",
                url: BASE_URL + "spedostech/search",
                data: {
                    'search_keyword' : value
                },
                dataType: "json",
                success: function(msg){
                    // var obj = JSON.stringify(msg);
                    console.log(msg);
                    //we need to check if the value is the same
                    if (value==$(that).val()) {
                        var container = $('<ul />');
                        $.each( msg, function( section, List ) {
                          var li = $('<li>Nalezeno v '+section+' (3)</li>');

                          // container.append('<li>Nalezeno v '+section+' (3)</li>');
                          // console.log( section + " : ");
                          var ul = $('<ul />');
                          $.each( List, function( key, item ) {
                            ul.append('<li><a href="#'+item.id+'" title="">'+item.name+'</a></li>');
                            // console.log("Name : " + item.name);
                          });
                          li.append(ul);
                          container.append(li);  
                        });

                    // console.log(container);
                        // $('#tt').html(container);
                        $('#search-whisperer').html(container);

                    //Receiving the result of search here
                    }
                }
            });
        }
    });
});



Ajax Email Send in Codeigniter


// routes

$route['admin/objednavka/send_email'] = "backend/order/send_email";

// html 

<div class="row static-info">
    <div class="col-md-5 name"> Email: </div>
    <input id="user_email" type="hidden" name="user_email" value="getsolved@gmail.com">
</div>

<div class="row static-info">
    <div class="col-md-5 name"> Subject: </div>
    <input id="user_email_sub" type="text" name="user_email_sub" value="getsolved@gmail.com">
</div>

<div class="row static-info">
    <div class="col-md-5 name"> body: </div>
    <textarea id="user_email_body" type="text" name="user_email_body">
    </textarea>
</div>

<div class="row static-info">
    <div class="col-md-5 name"></div>
    <div class="col-md-5 value">  
        <button id="sendOrderEmail">Send Order Email</button>
    </div>
</div>

<div class="row static-info">
    <div class="col-md-5 name"></div>
    <div class="col-md-2" style="display: none;" id="loading">
       <img src="<?= base_url() ?>assets/backend/img/preloader.gif" width="100%">
    </div>
</div>

// jquery 

$("#sendOrderEmail").click(function () {

    var url = $(".url").val();
    var email = $('#user_email').val();
    var user_email_sub= $('#user_email_sub').val();
    var user_email_body= $('#user_email_body').val();

    // alert(email + email_type)
    $.ajax({
        url: url + "admin/objednavka/send_email",
        // url: url + "backend/order/send_email",
        type: 'post',
        data: { 
             'user_email_sub': user_email_sub,  
             'email': email, 
             'user_email_body': user_email_body 
        },
        dataType: 'json',
        beforeSend: function () {
            $("#loading").show();
        },
        success: function (json) {
            
            if (json.success) {
                alert('Email Successfully Sent')
            }
            $("#loading").hide();
            
        },
        error: function (request, status, error) {
            alert("Nepodařilo se změnit.");
            $("#loading").hide();
        }
    });
});

// controller
class Order extends Base_backend
{

    public function __construct()
    {
        parent::__construct();

        $this->load->library('layout');
        $this->layout->title('Objadnávka | Weboo Shop 2.0');
        $this->load->library('form_validation');

        $this->menuOpen->m_order = 1;
    }

    public function sendEmailBackend($to, $subject, $body)
    {
        $sender = $this->setting_model->get_setting("email", "sender", DEFAULT_LANG)->value;
        $senderName = $this->setting_model->get_setting("email", "sender-name", DEFAULT_LANG)->value;

        include_once APPPATH.'/libraries/phpmailer/PHPMailerAutoload.php';
        $mail = new PHPMailer;

        $mail->isSMTP();                            // Set mailer to use SMTP
        $mail->Host = _s("mail-server");            // Specify main and backup SMTP servers
        $mail->SMTPAuth = true;                     // Enable SMTP authentication
        $mail->Username = _s("mail-login");         // SMTP username
        $mail->Password = _s("mail-password");      // SMTP password
        $mail->SMTPSecure = 'ssl';                  // Enable TLS encryption, `ssl` also accepted
        $mail->Port = _s("mail-port");              // TCP port to connect to
        $mail->CharSet = 'UTF-8';
        
        $mail->setFrom(_s("mail-login"), $senderName);
        $mail->addAddress($to);     
        $mail->addReplyTo($sender, $senderName);

        $mail->isHTML(true);                         // Set email format to HTML

        $mail->Subject = $subject;
        $mail->Body = $body;
        $mail->AltBody = $body;
        $mail->send();

        return 1;
    }

    public function send_email()
    {
        $item = $_POST['email_type'];
        $email_text  = $this->b_order_model->get_email_text_by_status($item);

        $email = $_POST['email'];
        $user_email_sub= $_POST['user_email_sub'];
        $user_email_body = $_POST['user_email_body '];

        $status = $this->sendEmailBackend($email,$user_email_sub, $user_email_body );

        echo json_encode(['success' => 1,'status' => $status]);
    }
}

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


Yii2 Ajax onChange onBlur load product items details

$("input[id='acceptapplication-mouja']").replaceWith('');
            //$("input[id='acceptapplication-j_l_no']").replaceWith('');

            $("select[id*='sub_district']").change(function(){

                var subDistrictId = $("select[id*='sub_district']").val();
//
                $("input[id='acceptapplication-mouja']").replaceWith('');
//                $("input[id='acceptapplication-j_l_no']").replaceWith('');
//


                $.ajax({
                    url: 'getUrlManager()->createUrl("acceptapplication/getmoujajlno") ?>' ,
                    data: { id : subDistrictId },
                    type : 'POST',
                    success: function (json) {
//                        $("#acceptapplication-mouja").remove();
//                        $("#acceptapplication-j_l_no").remove();

                        var selectOptionsMouja = " Select Mouja ";
                        //var selectOptionsJLNo = "";
                        var jsona = JSON.parse(json);

                        $.each(jsona,function(i,m){

                            selectOptionsMouja += ""+ m.mouja +"";
                            //selectOptionsJLNo =  m.j_l_no ;

                        });

                        $("#acceptapplication-mouja").empty().append(selectOptionsMouja);
                        //$("#acceptapplication-j_l_no").val(selectOptionsJLNo);

                    }
                });
            });


            $("#acceptapplication-j_l_no").blur(function(){

                var JLNo = $("#acceptapplication-j_l_no").val();

                $.ajax({
                    url: 'getUrlManager()->createUrl("acceptapplication/getmoujas") ?>' ,
                    data: { id : JLNo },
                    type : 'POST',
                    success: function (json) {

                        var obj = JSON.parse(json);

                        var selectOptionsMouja = " " + obj.mouja +"";

                        $("#acceptapplication-mouja").append(selectOptionsMouja);

                    }
                });
            });


            $("#acceptapplication-mouja").change(function(){

                var mouja = $("#acceptapplication-mouja").val();

                $.ajax({
                    url: 'getUrlManager()->createUrl("acceptapplication/getjlnos") ?>' ,
                    data: { id : mouja },
                    type : 'POST',
                    success: function (json) {

                        var obj = JSON.parse(json);

                        var selectOptionsJLNo = obj.j_l_no ;

                        $("#acceptapplication-j_l_no").val(selectOptionsJLNo);

                    }
                });
            });

        });