Question

如果不重新加载页面，如何使用AJAX成功函数显示图像？

在我的表单中，if ... else条件已存在，如果图像存在于数据库中，则if条件将执行。 else条件将显示默认图像。

形式

<form  id="data_form" action="#" method="post"  enctype="multipart/form-data">
                <div class="photoContainer">
                    <a href="#" class="user-img">
                        <div class="profile-pic">
                            <?php if (empty($s_profile_imagee[0]) || empty($s_profile_imagee)) { ?>
                                <img src="<?php echo base_url(); ?>images/default.jpg" class="img-user" alt="" width="150px;" height="150px;"/>
                            <?php } else { ?>
                                <img src="<?php echo 'data:image;base64,' . $s_profile_imagee; ?>" class="img-user" alt="" width="150px;" height="150px;"/>
                            <?php } ?>
                            <?php if (empty($s_profile_imagee[0]) || empty($s_profile_imagee)) { ?>
                                <div id="profile-pic"><i class="fa fa-camera"><input type="file" class="fileInput" value="Add Photo" onchange="this.form.submit()" name="image"> Add Photo</i></div>
                            <?php } else { ?>
                                <div id="profile-pic"><i class="fa fa-camera"><input type="file" class="fileInput" value="Change Photo" onchange="this.form.submit()" name="image"> Change Photo</i></div>
                            <?php } ?>
                        </div>
                    </a>
                </div>
            </form>

脚本

<script>
              $(document).ready(function () {

                  $('#data_form').on('submit', function (e) {

                      var form_data = $(this).serialize();

                      $.ajax({
                          type: "POST",
                          url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_profile_imagee',
                          data: form_data,
                          success: function (data)
                          {

                                 $('.photoContainer').text($("#image").val());

                          },
                          error: function ()
                          {
                              alert('failed');
                          }
                      });

                      e.preventDefault();
                  });

              });
        </script>

Answer 1

试试这个

 $(".img-user").setAttribute("src","<?php echo base_url();?>img/"+data);

在不重新加载页面的情况下，如何使用AJAX成功函数显示图像？

1 个答案: