Question

我需要在上传前预览图片我尝试使用代码，但它没有做任何事情。

<form name=”user_profile” id=”user_profile” action=”” method=”POST” enctype=”multipart/form-data” >

    <div class=”profile”>
       <img class=”list_prev” id=”user_old” src=”add path her for preview image from folder”>

    <input type=”file” id=”user_image” class=”image ” name=”user_image” value=”” onchange=”preview_profile_image(this)” />

    </div>

</form>

这是我的剧本..

 <script type=”text/javascript”>

    function preview_profile_image(input) {
        if (input.files && input.files[0]) {
            var filerdr = new FileReader();

            filerdr.onload = function(e) {
                jQuery(‘.list_prev’).attr(‘id’, e.target.result);
            }

            filerdr.readAsDataURL(input.files[0]);
        }
    }

    </script>

任何人都应该帮我解决错误。

Answer 1

更改此行;

  jQuery(‘.list_prev’).attr(‘src’, e.target.result);

Answer 2

使用src而不是id

并且readAsDataURL应该在加载后。

filerdr.onload = function(e) {
    jQuery('.list_prev').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);

＆＃13;

function preview_profile_image(input) {
    if (input.files && input.files[0]) {
      var filerdr = new FileReader();
      filerdr.onload = function(e) {
        console.log(e.target.result);
        jQuery('.list_prev').attr('src', e.target.result);
      }
      filerdr.readAsDataURL(input.files[0]);  
    }
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="user_profile" id="user_profile" action=”” method="POST" enctype="multipart/form-data" >

    <div class="profile">
       <img class="list_prev" id="user_old" src="add path her for preview image from folder">

    <input type="file" id="user_image" class="image" name="user_image" value="" onchange="preview_profile_image(this)" />

    </div>

</form>

＆＃13;

Answer 3

轻微更改只是src而不是id

这是代码

 function preview_profile_image(input) {
    if (input.files && input.files[0]) {
    var filerdr = new FileReader();
    filerdr.onload = function(e) {
    jQuery(‘.list_prev’).attr(‘src’, e.target.result);
    }
    filerdr.readAsDataURL(input.files[0]);
    }
}

Answer 4

在第src行

使用id代替jQuery(‘.list_prev’).attr(‘src’, e.target.result);

Answer 5

您可以使用以下代码在图片上传之前对其进行预览

您的.js文件

  $("#upload_img").change(function() {
 console.log(this);
 readURL(this);
});

function readURL(input) {
  if (input.files && input.files[0]) {
   var reader = new FileReader();

   reader.onload = function(e) {
    $('#preview_img').attr('src', e.target.result);
   }

     reader.readAsDataURL(input.files[0]); // convert to base64 string
 }
}

HTML文件

     <input type="file" name="image" id="upload_img" class="form-control">
   <h5>preview</h5>
   <img src="#" id="preview_img" class="img-fluid" style="border-radius: 10px;">

希望对您有帮助

您还可以从这里preview image before upload

阅读全文

Jquery上传前预览图像

5 个答案: