title: Ajax image preview before upload and form validation in codeigniter
body: <p>I want to preview image in placeholder before uploading a image and form validation using ajax in codeigniter</p>
  
  <p>what i have done is shown in the below code first i wrote image preview code in javascript then ajax to submit the form details and getting the response from the controller and showing in the view</p>
  
  <p>view-></p>
  
  <pre><code>
      &lt;?php echo form_open_multipart('items/itemsave', array('id' =&gt; 'uploadForm')) ?&gt;
                &lt;?php if (!empty($msg)): ?&gt;
                  &lt;div class="alert &lt;?php echo $msg_class ?&gt;" role="alert"&gt;
                    &lt;?php echo $msg; ?&gt;
                  &lt;/div&gt;
                &lt;?php endif; ?&gt;
                &lt;div class="form-group text-center" style="position: relative;" &gt;
                  &lt;span class="img-div"&gt;
                    &lt;div class="text-center img-placeholder"  onClick="triggerClick()"&gt;
                      &lt;h4&gt;Update image&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;img src="../uploads/2.png" name="profileDisplay" onClick="triggerClick()" id="profileDisplay" style="width: 200px; height: 200px"&gt;
                  &lt;/span&gt;
                  &lt;input type="file" name="profileImage" onChange="displayImage(this)" id="profileImage" class="form-control" style="display: none;"&gt;
                  &lt;label&gt;Profile Image&lt;/label&gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="name" id="name" class="form-control" placeholder="Name" &gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="location" id="location" class="form-control" placeholder="Location" &gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="buyingprice" id="buyingprice" class="form-control" placeholder="Buying price" &gt;
                &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="sellingprice" id="sellingprice" class="form-control" placeholder="Selling Price" &gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="category" id="category" class="form-control" placeholder="Category" &gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="code" id="code" class="form-control" placeholder="Code" &gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;input type="text" name="description" id="description" class="form-control" placeholder="Description" &gt;
                &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;button type="submit" name="save_profile" class="btn btn-primary btn-block"&gt;Save User&lt;/button&gt;
                &lt;/div&gt;
              &lt;?php echo form_close() ?&gt;```
  
      javascript-&gt;
      ```&lt;script type="text/javascript"&gt;
          $(function() {
              $("#uploadForm").on('submit', function(e) {
                e.preventDefault();
                  //e.stopPropagation();
  
                  var contactForm = $(this);
  
                  $.ajax({
                      url: contactForm.attr('action'),
                      type: 'post',
                      data: contactForm.serialize(),
                      success: function(response){
                          console.log(response);
                          if(response.status == 'success') {
                              $("#uploadForm").show();
  
                          }
  
                          $("#message").html(response.message);
  
                      }
                  });
              });
  
  
  
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      function triggerClick(e) {
        document.querySelector('#profileImage').click();
  
      }
      function displayImage(e) {
  
        if (e.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e){
            document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
          }
          reader.readAsDataURL(e.files[0]);
        }
      }
      &lt;/script&gt;
  
  </code></pre>
  
  <p>controller-></p>
  
  <pre><code>
      public function itemsave(){
  
  
      $this-&gt;form_validation-&gt;set_rules('name','Name','required');
              $this-&gt;form_validation-&gt;set_rules('location','Location','required');
              $this-&gt;form_validation-&gt;set_rules('buyingprice','buyingprice','required');
              $this-&gt;form_validation-&gt;set_rules('sellingprice','sellingprice','required');
              $this-&gt;form_validation-&gt;set_rules('category','category','required');
              $this-&gt;form_validation-&gt;set_rules('code','code','required');
              $this-&gt;form_validation-&gt;set_rules('description','description','required');
  
              $config['upload_path']   = './uploads/'; 
              $config['allowed_types'] = 'gif|jpg|png|jpeg'; 
              $config['max_size']      = 2048; 
              $config['max_width']     = 1024; 
              $config['max_height']    = 768;  
               $this-&gt;load-&gt;library('upload', $config);
              if($this-&gt;form_validation-&gt;run()==true &amp;&amp; $this-&gt;upload-&gt;do_upload('profileImage'))
              {
                  $response = array(
                      'status' =&gt; 'success',
                      'message' =&gt; "&lt;h3&gt;Category Added successfully.&lt;/h3&gt;"      
                  );
                }
              else
              {
  
              if ( ! $this-&gt;upload-&gt;do_upload('profileImage')) {
                  $error = array('error' =&gt; $this-&gt;upload-&gt;display_errors()); 
                  $this-&gt;load-&gt;view('itemsadd', $error); 
                }
  
                  $response = array(
                      'status' =&gt; 'error',
                      'message' =&gt; validation_errors()
                  );
                  }
              $this-&gt;output
              -&gt;set_content_type('application/json')
              -&gt;set_output(json_encode($response));
      }
      }
  
  </code></pre>