首页 > 其他分享 >jquery 中上传的图片file文件,如果在html img元素中通过src展示 ,可以img的图片src属性直接去等于file文件吗,如果不可以的话,那么src怎么去展示file文件呢

jquery 中上传的图片file文件,如果在html img元素中通过src展示 ,可以img的图片src属性直接去等于file文件吗,如果不可以的话,那么src怎么去展示file文件呢

时间:2023-02-21 14:14:26浏览次数:49  
标签:src img 展示 html 文件 file

bot回答:

  

Answer: 不可以。文件不能直接设置为 img 元素的 src 属性值。要展示 file 文件,需要在 img 属性中使用 JavaScript 来实现,可以参考以下代码:

<img id="uploaded-image" />
<input type="file" id="image-input" />

<script>
// 监听文件输入:
document.querySelector('#image-input').addEventListener('change', function() {
let file = this.files[0];
// 将文件作为图片渲染:
let reader = new FileReader();
reader.onload = function(e){
document.querySelector('#uploaded-image').src = e.target.result;
};
reader.readAsDataURL(file);
});
</script>

 

博友回答:

https://www.cnblogs.com/eret9616/p/13231542.html

读取到的file文件对象,

想给img标签使用,直接挂到src上不能用 

可以用这个api操作下

 

img.src = window.URL.createObjectURL(file);

 

标签:src,img,展示,html,文件,file
From: https://www.cnblogs.com/nextgg/p/17140736.html

相关文章

  • 字节输出流的基本流:FileOutputStream
    写入和读出的正确辨识为什么不能用来写入中文FileOutStream写数据的3种方式解决续写和换行问题我们的File类只能操作文件本身,而对于文件中的数据而无法操作,我们的IO......
  • 前端从接口的header中获取filename
    getFileNameFromHeaders=(headers)=>{constdisposition=headers['content-disposition']letfileName='未命名'try{fileName=disposition.split......
  • File: 获取并遍历文件夹中的内容listFiles方法
    我们的File类可以对文件和文件夹本身进行一些类的操作,其中最重要的就是获取并遍历文件夹中的内容了对此我们的java提供了以下的方法:以上的各个方法都能实现对文件夹中的......
  • iOS FileManager使用
    https://www.jianshu.com/p/39b7093fb862 在iOS应用开发的过程中,很多时候要用到数据存储,将数据存储在磁盘中。FileManager在存储的过程中就起到非常重要的作用,文件的......
  • file的各种转换
    1.将bloburl转换为file格式letdata={name: "新年致辞.png",status: "success",uid: 1664334311149,url: "blob:http://localhost:9528/d66ad67a......
  • Linux文件 profile、bashrc、bash_profile区别
    Linux系统中,有三种文件出现的非常频繁,那就是profile、bash_profile、bashrc文件。1、profile作用profile,路径:/etc/profile,用于设置系统级的环境变量和启动程序,在......
  • 00022.09 用字节流读写文件:FileInputStream和FileOutputStream
    用文件字节流读写文件目录文章目录​​用文件字节流读写文件目录​​​​前言​​​​一、InputStream​​​​二、使用字节流,来读取纯文本文件步骤​​​​三、复制任意......
  • 00022.09 用FileReader和FileWriter复制纯文本文件
    文章目录文章目录​​文章目录​​​​一、纯文本文件的复制​​一、纯文本文件的复制想一想要几个IO流是不是两个一个读,一个写......
  • 00022.07 文件的IO操作(用FileReader读取、FileWriter 写入纯文本文件)
    文件的IO操作目录文章目录​​文件的IO操作目录​​​​前言​​​​一、读取一个纯文本文件​​​​二、使用步骤​​​​1、读取纯文本文件​​​​2、写入纯文本文件​​......
  • Java: File
    importjavafx.application.Application;//https://gluonhq.com/products/javafx/https://github.com/openjdk/jfximportjavafx.fxml.FXMLLoader;//https://gluo......