【问题标题】:How to preview image before uploading in jquery如何在jquery中上传之前预览图像
【发布时间】:2021-09-16 22:09:17
【问题描述】:

我可以使用 javascript fileReader 读取上传的图片,但是如何在 jquery 中读取上传的图片,以便在上传前预览图片?

【问题讨论】:

标签: jquery


【解决方案1】:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewHolder').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  } else {
    alert('select a file to see preview');
    $('#previewHolder').attr('src', '');
  }
}

$("#filePhoto").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br/><br/>
<input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<br/><br/>
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px" style="border-radius:3px;border:5px solid red;"/>

【讨论】:

  • 这对我有用,但必须稍作调整,我必须为input.files[0] 提供索引所以input[0].files[0]
【解决方案2】:

使用javascript

<div class="form-group">   
    <label for="password" class="form-group">upload Image</label>
    <input id="image" type="file" name="image" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" required="required">
    <img id="blah"  width="50" height="50" />
</div>

【讨论】:

  • 你能在你的代码中添加一些解释吗?为什么你认为它可以解决问题?哪些部分是必要的?请不要只发布代码,这使得 OP 几乎不可能发现他的错误
  • 最好的一个❤️,谢谢
  • @NicoHaase 这个问题没有问题,毕竟只是一个关于如何去做的问题。这个答案没有解释,是最简单的。
【解决方案3】:

在使用 jquery 上传之前预览图像

创建一个事件onchange,该事件会在选择任何图像时触发,函数loadImg()可用于在框架。

实例:

function loadImg(){
    $('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
}
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" accept="image/" onchange="loadImg()"><br/>
    <img id="frame"  width="100px" height="100px"/>
</body>
</html>

【讨论】:

    【解决方案4】:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="jquery-3.1.1.min.js"></script>
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
      
    <style type="text/css">
    p1{
        color:orange;
    }
    p2{
        color:green;
    }
    
     .thumb-image
     {
        float:left;
        width:50px;
        position:relative;
        padding:2px;
    }
    
    body{
                    
                    }
            
                #form label{
                    font:bold 11px arial;
                    color: #565656;
                    padding-left: 1px;
                }
                #form label.mandat{color:red;}
                
               
                #form img{
                    margin-bottom: 8px;
                }
                #form input[type="submit"]{
                    background-color: #0064aa;
                    border: none;
                    color: #fff;
                    padding: 5px 8px;
                    cursor: pointer;
                    font:bold 12px arial;
                }
                .error{
                    border: 1px solid olive;
                }
                
    
    
    </style>
      
      <script>
    $.validator.addMethod("error9", function(value, element, error) {          
        return error.test(value);
    } );
    
    
    
    
      $(function() {
      
      
        $("#register-form").validate({
        
           
            rules: {
               
                   
            pic: {
                required: true,
                error9: /(?=.(gif|png|jpg|jpeg))/
    
            }
            
            
    
            },
    
            messages: {
    
    
              
                pic: {
                required: "<p1>Please upload image</p1>",
                error9: "<p2> only accept jpg,gif,png</p2>"
            }
    
               
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
    
      });
      
      </script>
      <script>
    $(document).ready(function() {
            $("#pic").on('change', function() {
              //Get count of selected files
              var countFiles = $(this)[0].files.length;
              var imgPath = $(this)[0].value;
              var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
              var image_holder = $("#image-holder");
              image_holder.empty();
              if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                if (typeof(FileReader) != "undefined") {
                  //loop for each file selected for uploaded.
                  for (var i = 0; i < countFiles; i++) 
                  {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                      $("<img />", {
                        "src": e.target.result,
                        "class": "thumb-image"
                      }).appendTo(image_holder);
                    }
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[i]);
                  }
                } else {
                  echo (image_holder);
                }
              } else {
                //alert ("Pls select only images");
              }
            });
          });
    </script>
    
    
    </head>
    <body>
    
     <div style='margin:0 auto'>
    
    <form name= "" id="register-form" action="loginformjq.php"  method="post">
    <div id="form">
    <table  border="1" padding="2" cellpadding="2" width="20%" bgcolor="lightblue" align="center" cellspacing="2">
    
    <tr>
    <td colspan=2>
    <center><font size=4><p style="color: purple"><marquee direction="left" behavior="alternate" style="border:solid olive">Student Registration Form</marquee></p></font></center>
    </td>
    </tr>
                   
                        
    <tr><p style="color: yellow"><td>
    <p class="error">
         <input type="file" name="pic"  id="pic"></p><span id="image-holder"> </span>
         </p></td></tr>
    
    
    
    <tr>
    <p style="color: yellow"></p>
    <td colspan="1"><input type="submit" value="submit"></td>
    
    </tr>
    </table>
    </form>
      
    </div>
            
            
            </div>
    </body>
    </html>

    【讨论】:

    • Provide code is not working 在发布答案之前运行代码 sn-p。
    猜你喜欢
    • 2018-03-30
    • 2011-05-26
    • 1970-01-01
    • 2021-12-27
    相关资源
    最近更新 更多