title: How to get the image path on dynamically adding new file field using ajax
body: <p>Here it is the main field that to dynamically add the elements. In this form by clicking add button it add the html part in the page. That works fine.</p>
  <pre><code>&lt;div class=&quot;col-md-12 input_fields_wrap2&quot;&gt;&lt;/div&gt;
  &lt;button class=&quot;btn btn-primary add_field_button2&quot; id=&quot;btnclr2&quot;&gt;Add&lt;/button&gt;
  </code></pre>
  <p>And the remaining script work is here for adding the fields.</p>
  <pre><code>&lt;script&gt;
  $(document).ready(function()
  {
      
    var wrapper = $(&quot;.input_fields_wrap2&quot;); //Fields wrapper
    $('.add_field_button2').click(function(e)
    {
      var sub = 1;
      e.preventDefault();
      $(wrapper).append('&lt;div&gt;&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Sub-Article Heading&lt;/label&gt;&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;subarticle_title&quot; placeholder=&quot;Sub Article Heading&quot; name=&quot;sub_article_heading[]&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Sub Article Image&lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;&lt;input type=&quot;file&quot; class=&quot;form-control required&quot; name=&quot;file_upload1[]&quot; id=&quot;file_upload1&quot; value=&quot;&quot; placeholder=&quot;&quot;/&gt;&lt;input type=&quot;hidden&quot; name=&quot;giftcardpath1[]&quot; id=&quot;giftcardpath1&quot; value=&quot;&quot; &gt;&lt;span id=&quot;giftimage1&quot; style=&quot;display: none&quot;&gt;&lt;img src=&quot;&quot; id=&quot;giftcard1&quot;&gt;&lt;/span&gt;&lt;span style=&quot;color: red;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Sub-Article Image-Caption&lt;/label&gt;&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;title&quot; placeholder=&quot;Sub Article Image caption&quot; name=&quot;sub_article_img_caption[]&quot; value=&quot;&quot; required=&quot;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;col-md-12&quot;&gt;&lt;div class=&quot;form-group&quot;&gt;&lt;label&gt;Content&lt;/label&gt;&lt;textarea class=&quot;form-control&quot; name=&quot;sub_article_content[]&quot;  rows=&quot;6&quot; placeholder=&quot;Sub Articles Content...&quot;&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;a  style=&quot;margin-bottom:15px; href=&quot;#&quot; class=&quot;remove_field btn btn-danger btn-xs&quot;&gt;Remove&lt;/a&gt;&lt;br&gt;&lt;/div&gt;');
      $('#file_upload1').on('change',function(){
          var file ;
          file = this.files[0];
          var img = new Image();
          var _URL = window.URL || window.webkitURL;
          img.src = _URL.createObjectURL(file);
          img.onload = function () {
          var reader = new FileReader();
          reader.onloadend = function() {
          // alert(reader.result);
              $.ajax({
                type: &quot;POST&quot;,
                url: base_url+&quot;Admin/UploadImg&quot;, 
                data: { 
                   imgBase64: reader.result,       
                }
              }).done(function(data){
                  data = $.parseJSON(data);
                if(data.imgpath!='')
                {
                    $('#giftcardpath1').val(data.imgpath); 
                    alert('Image upload successfull'); 
                }
              });
          }
          reader.readAsDataURL(file);
          };
      });
      sub +=1;
      
    });
  
    //user click on remove text
    $(wrapper).on(&quot;click&quot;,&quot;.remove_field&quot;, function(e)
    { 
      e.preventDefault(); 
      $(this).parent('div').remove(); 
    });
  });
  
  &lt;/script&gt;
  </code></pre>
  <p>But the Main problem is whenever i am upload a first file it works fine and display the alert and image path but later uploading image in second added field it can not store the path of that second image and did not display the alert.</p>
  <p>My Upload image code is</p>
  <pre><code>public function UploadImg()
      {  
          $rawData = $_POST['imgBase64'];
          $filteredData = explode(',', $rawData);
          $unencoded = base64_decode($filteredData[1]);
          $datime = time();
          $fp = fopen('upload_dataimage/'.$datime.'.jpg', 'w'); 
          fwrite($fp, $unencoded);  
          fclose($fp);
          $img_url = 'upload_dataimage/'.$datime.'.jpg';   
          echo json_encode(array('result'=&gt;'1','imgpath'=&gt;$img_url)); 
          exit;    
      }
  </code></pre>
  <p>please help me to get rid of this problem and made me happy.
  Thanks in advance..</p>