Welcome Guest, Not a member yet? Register   Sign In
Upload image with ajax and remove or add more image
#1

Sorry for english , im searching  a tutorial to add and remove img with codeigniter and ajax.
Reply
#2

(06-30-2018, 10:45 AM)pippuccio76 Wrote: Sorry for english , im searching  a tutorial to add and remove img with codeigniter and ajax.

Hi , i try to modify a script this is the html :

Code:
<input  type='file'    id='file'  class='form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded-3 g-py-13 g-px-15' name='file'   />

 <input type="button" class="button" value="Upload" id="but_upload">


  </div>
</div>

<div class="uploaded_images"></div>


This is the jquery code:


Code:
$("#but_upload").click(function(){

     var fd = new FormData();
     var files = $('#file')[0].files[0];
     fd.append('file',files);
     fd.append('request',1);

     // AJAX request
     $.ajax({
      url: '<?= base_url() ?>index.php/lavori/ajax_upload',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          var count = $('.uploaded_images .content').length;
          count = Number(count) + 1;

          // Show image preview with Delete button
          $('.uploaded_images').append("<div class='content' id='content_"+count+"' ><img src='"+response+"' width='100' height='100'><button class='delete' id='delete_"+count+"'>Delete</button></div>");
        }else{
          alert('file not uploaded');
        }
      }
     });
    });

    // Remove file
    $('.uploaded_images').on('click','.content .delete',function(){
   
     var id = this.id;
     var split_id = id.split('_');
     var num = split_id[1];

     // Get image source
     var imgElement_src = $( '#content_'+num+' img' ).attr("src");
   
     // AJAX request
     $.ajax({
      url: '<?= base_url() ?>index.php/lavori/ajax_upload',
      type: 'post',
      data: {path: imgElement_src,request: 2},
      success: function(response){
       // Remove <div >
       if(response == 1){
        $('#content_'+num).remove();
       }
      }
     });
    });

And this the function to upload/delete :

PHP Code:
function ajax_upload(){  
           

    $request 
$_POST['request'];

 
   // Upload file
 
   if($request == 1){
 
        $filename time().$_FILES['file']['name'];
 
       /* Location */
 
       $location site_url().'uploads/'.$filename;
 
     
        $config
['upload_path'  './uploads/' 
        $config
['allowed_types'] = 'jpg|jpeg|png|gif' 
        $config
['file_name'    time().$_FILES["file"]["name"];

 
       $this->load->library('upload'$config);  
                    

         
if(!$this->upload->do_upload('file')){  
            echo $this
->upload->display_errors();  
          
}else{  
            $data 
$this->upload->data();  
            echo base_url
().'uploads/'.$data["file_name"]; 

 
          
        exit
;
 
   }

 
   // Remove file
 
   if($request == 2){

 
       $path $_POST['path'];
 
       $return_text 0;

 
       // Check file exist or not
 
       iffile_exists($path) ){
 
        // Remove file
 
        unlink($path);
 
        
         
// Set status
 
        $return_text 1;
 
       }else{
 
        // Set status
 
        $return_text 0;
 
       }

 
       // Return status
 
       echo $return_text;
 
       exit;
 
   }


 
   

The upload work fine but the delete dont work . Can someone helpme
Reply




Theme © iAndrew 2016 - Forum software by © MyBB