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

在本文中，我们将讨论两种方法来预览通过表单作为输入的图像。我们将使用 JavaScript 构造函数FileReader()读取提供的图像，然后我们将显示它。

示例：让我们看看带有 CSS 样式的 HTML 结构。

    
        
        
        Geeks
        
            .holder {
                height: 300px;
                width: 300px;
                border: 2px solid black;
            }
            img {
                max-width: 300px;
                max-height: 300px;
                min-width: 300px;
                min-height: 300px;
            }
            input[type="file"] {
                margin-top: 5px;
            }
            .heading {
                font-family: Montserrat;
                font-size: 45px;
                color: green;
            }
        
    
    
        
        
        Geeks For Geeks
        
            
                
            
            
        
    

我们将使用 JavaScript 与两个主要元素进行交互。首先，我们有一个包含“img”标签的部门元素。使用Jquery，我们将在上传时更改“img”标签的“src”属性以预览图像。第二个元素是“输入”标签。在这种情况下必须指定type = “file” 。

输出：

Javascript代码：

$(document).ready(()=>{
      $('#photo').change(function(){
        const file = this.files[0];
        console.log(file);
        if (file){
          let reader = new FileReader();
          reader.onload = function(event){
            console.log(event.target.result);
            $('#imgPreview').attr('src', event.target.result);
          }
          reader.readAsDataURL(file);
        }
      });
    });

说明：

• FileReader()： FileReader()是一个构造函数，用于创建FileReader对象（类的实例），它帮助我们执行异步读取原始数据缓冲区或文件等操作。 File或Blob对象用于指定要读取的数据类型。在这种情况下，变量 reader 是我们用来执行所需操作的对象。
• reader.readAsDataURL：上传后的File或Blob转换为data:URL ，其中包含表示Blob或File 中数据的base64编码字符串。这个“data:URL”存储在result属性中，可以通过event.target.result访问。
• reader.onload： reader.onload函数包含一个事件处理程序，当读取器成功加载时会触发该事件处理程序。这是一个异步操作，因此即使在加载完成之前也会执行后续代码。加载成功后，我们使用event.target.result访问形成的“DataURL”并将其插入到src属性中。这样可以预览图像。

最终代码：

    
        
        
        Geeks
    
    
        
        
        Geeks For Geeks
        
            
                
            
            
        
        
            .holder {
                height: 300px;
                width: 300px;
                border: 2px solid black;
            }
            img {
                max-width: 300px;
                max-height: 300px;
                min-width: 300px;
                min-height: 300px;
            }
            input[type="file"] {
                margin-top: 5px;
            }
            .heading {
                font-family: Montserrat;
                font-size: 45px;
                color: green;
            }
        
        
            $(document).ready(() => {
                $("#photo").change(function () {
                    const file = this.files[0];
                    if (file) {
                        let reader = new FileReader();
                        reader.onload = function (event) {
                            $("#imgPreview")
                              .attr("src", event.target.result);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            });
        
    

输出：