如何使用Ajax动态添加新文件字段时获取图像路径

问题描述

这里是动态添加元素的主要字段。在这种形式中，通过单击添加按钮，它将在页面中添加html部分。很好。

<div class="col-md-12 input_fields_wrap2"></div>
<button class="btn btn-primary add_field_button2" id="btnclr2">Add</button>

剩下的脚本工作在这里用于添加字段。

<script>
$(document).ready(function()
{
    
  var wrapper = $(".input_fields_wrap2"); //Fields wrapper
  $('.add_field_button2').click(function(e)
  {
    var sub = 1;
    e.preventDefault();
    $(wrapper).append('<div><div class="row"><div class="col-md-4"><div class="form-group"><label>Sub-Article heading</label><input type="text" class="form-control" id="subarticle_title" placeholder="Sub Article heading" name="sub_article_heading[]"></div></div><div class="col-md-4"><div class="form-group"><label>Sub Article Image<span style="color: red;">*</span></label><input type="file" class="form-control required" name="file_upload1[]" id="file_upload1" value="" placeholder=""/><input type="hidden" name="giftcardpath1[]" id="giftcardpath1" value="" ><span id="giftimage1" style="display: none"><img src="" id="giftcard1"></span><span style="color: red;"></span></div></div><div class="col-md-4"><div class="form-group"><label>Sub-Article Image-Caption</label><input type="text" class="form-control" id="title" placeholder="Sub Article Image caption" name="sub_article_img_caption[]" value="" required=""></div></div><div class="col-md-12"><div class="form-group"><label>Content</label><textarea class="form-control" name="sub_article_content[]"  rows="6" placeholder="Sub Articles Content..."></textarea></div></div><div class="clearfix"></div></div><a  style="margin-bottom:15px; href="#" class="remove_field btn btn-danger btn-xs">Remove</a><br></div>');
    $('#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: "POST",url: base_url+"Admin/UploadImg",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("click",".remove_field",function(e)
  { 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
  });
});

</script>

但是主要问题是，每当我上载第一个文件时，它都可以正常工作并显示警报和图像路径，但是后来在第二个添加的字段中上载图像时，它无法存储该第二个图像的路径并且不显示警报。

我的上传图片代码是

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'=>'1','imgpath'=>$img_url)); 
        exit;    
    }

请帮助我摆脱这个问题并使我感到高兴。预先感谢。.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajax ajaxform javascript jquery