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

📅  最后修改于: 2021-11-25 04:25:25             🧑  作者: Mango

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

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



    
        
        
        Geeks
        
    
    
        
        Geeks For Geeks
        
            
                pic             
                     
    

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

最终代码:



    
        
        
        Geeks
    
    
        
        Geeks For Geeks
        
            
                pic             
                     
                      

输出: