首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图像上传预览: window.URL.createObjectURL()只起作用一次

问题:图像上传预览: window.URL.createObjectURL()只起作用一次

答案: window.URL.createObjectURL()是一个用于在浏览器中预览本地图像文件的方法。它接受一个File对象或Blob对象作为参数,并返回一个表示该对象的URL。这个URL可以用于将图像显示在HTML的<img>元素中或进行其他操作。

然而,对于同一个File或Blob对象,调用window.URL.createObjectURL()只能有效地创建一次URL。一旦URL被创建并使用,它就会绑定到一个特定的图像,并且无法再次使用相同的URL来显示不同的图像。

这是因为window.URL.createObjectURL()创建的URL是临时的,与浏览器中的内存相关联。一旦URL被释放或不再使用,浏览器会自动清理相关的资源。

如果想要多次预览图像上传的效果,可以通过创建多个<img>元素或使用其他方法来实现。以下是一种可能的解决方案:

代码语言:txt
复制
// HTML
<input type="file" id="image-input">
<div id="preview-container"></div>

// JavaScript
document.getElementById("image-input").addEventListener("change", function(event) {
  var file = event.target.files[0];
  
  var img = document.createElement("img");
  img.src = window.URL.createObjectURL(file);
  
  document.getElementById("preview-container").appendChild(img);
});

上述示例中,我们创建了一个包含文件选择的<input>元素,并监听其change事件。每当用户选择一个图像文件时,我们创建一个新的<img>元素,并将其设置为刚上传的图像的预览。这样,用户可以多次选择并预览不同的图像文件。

对于腾讯云相关产品和产品介绍,你可以参考腾讯云对象存储(COS)作为图像上传的解决方案。腾讯云对象存储是一种高可用、高性能、弹性扩展的云存储服务,适用于图像、音视频、大型文件等的存储和处理。您可以通过腾讯云对象存储的API或SDK来实现文件上传和预览功能。具体的产品介绍和文档可以参考腾讯云对象存储的官方网页:腾讯云对象存储(COS)

请注意,以上解答仅供参考,具体实现方式可能因您的具体需求和环境而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浅谈h5文件上传

三、文件上传 1、上传图片并预览 选择图片,预览(base64),不真正传给后台,而是页面保存的时候传给后台(base64格式) 选择图片,预览(base64),上传给后台,后台返回图片地址(url),...保存页面时,再次提交上传成功后后台返回的图片地址(url) 选择图片,上传给后台,后台返回图片地址(url),页面预览,保存页面时,再次提交上传成功后后台返回的图片地址(url) 如果我们先将图片上传到服务器...name:文件名 lastModified:文件最后一次修改时间(时间戳形式) lastModifiedDate:文件最后一次修改时间(UNIX timestamp形式) size: 文件大小(byte...这里的小文件通常是指图像与 html 等格式的文件。 处理事件 FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面归纳了这些事件。...创建对象 URL 方法: window.URL.createObjectURL()。

2.6K10

前端vue 封装上传文件和下载文件的方法 导入方法直接使用

目录标题 1、上传文件 2、下载文件 1、上传文件 upload.js import axios from 'axios' import { Message } from "element-ui";...模拟点击a标签进行下载 function saveAs(blob, filename) { var link = document.createElement('a') link.href = window.URL.createObjectURL...* download的属性是HTML5新增的属性 * href属性的地址必须是非跨域的地址,如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口),这时download就会不起作用...* 此时,如果是下载浏览器无法解析的文件,例如.exe,.xlsx..那么浏览器会自动下载,但是如果使用浏览器可以解析的文件,比如.txt,.png,.pdf....浏览器就会采取预览模式.../pdf浏览器则会判断文件为 pdf ,自动执行预览的策略) */ 导入: import { downloadEvt } from "@/utils/download"; 使用: downloadEvt

2.9K10
  • input file读取文件

    2.使用 window.URL.createObjectURL 读取图片(转化为blod)(推荐) function setImagePreview() { var docObj = document.getElementById...而且最近做了一个需要上传图片预览的项目,用的最简单的input file上传,最开始想到的就是用filereader实现前端预览,很简单,见前面的第一段代码,在自己手机上测试,没问题。...但在某些奇葩手机上,比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片!但在该手机的微信,浏览器内上传均可以!...所以推荐使用window.URL.createObjectURL 最后如果需上传,可以使用form或者使用ajax上传,form表单提交比较简单,就不介绍。...利用实例化的FormData 上传文件。如: let fileObj = this.

    2.4K10

    《大胖 • 小课》- 玩玩多文件配多进度上传

    计算进度,渲染div.progress PS 特别提醒 xhr.upload.onprogress要写在xhr.send方法前面,否则event.lengthComputable状态不会改变,只有在最后一次才能获得...',completedPercent); } } //注意 send 一定要写在最下面,否则 onprogress 只会执行最后一次 也就是100%...+预览+取消 上一个栗子的多文件上传只有一个进度条,有些需求可能会不大一样,需要观察到每个文件的上传进度,并且可以终止上传。...说明 为了预览的需要,我们这里选择上传图片文件,其他类型的也一样,只是预览不方便 页面内增加一个多图预览的容器div.img-box 根据选择的文件信息动态创建所属的预览区域和进度条以及取消按钮 为取消按钮绑定事件...,调用xhr.abort();终止上传 使用window.URL.createObjectURL预览图片,在图片加载成功后需要清除使用的内存window.URL.revokeObjectURL(this.src

    58120

    图片上传预览插件制作思路及Demo分享

    背景 其实,图片预览功能非常地常见。所以就动手做了一个小插件。在此分享一下思路。 实现图片预览的一些方法。 了解了一下,其实方法都是大同小异的。...缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量。...使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE。...我的插件制作 我选择了比较保守的方法,就是第三种使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader...第一种就是直接通过改变img的src来预览图片,第二种就是在低版本的IE下,通过滤镜来达到预览效果。

    1.4K20

    JS魔法堂之实战:纯前端的图片预览

    一、前言                                   图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。...在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上。...先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了。   偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅。...因此假如使用IE11,但文本模式却设置为10以下,那就没木有办法实现图片预览了。  ...采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

    2.4K60

    js实现本地上传图片预览

    在做网站系统时经常会用到图片上传功能,用户往往希望能看到自己上传的图片的样子,有的人是采用将图片上传到服务器之后再回显到页面,这种方式在无形之中增加了服务器的运行压力,因为如果用户感觉不满意还会再次上传图片...为了减轻服务器压力,我们通过js来实现本地图片上传预览功能,不经过服务器就实现预览效果。...file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> 上面这部分代码是页面上传按钮和显示图片的区域...docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL...imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } 这样我们就实现了本地图片上传预览功能

    8K40

    本周群问题分享

    JavaScript 如何获取上传图片的路径?...参考答案 1 可以利用后台语言PHP来获取图片路径,PHP当中通过$_FILES这个全局变量进行文件相关信息的获取,使用$_FILES["file"]["name"]获取文件的名字;如果想具体了解PHP文件上传操作可以在...HTML5学堂官网搜索“文件上传”; 2 如果图片已经在服务器当中(正常来说,数据库是存储图片的路径而不是图片),可以通过AJAX向服务器请求图片相关信息,但是需要后台方面的配合; 3 获取图片路径可能跟实现图片预览有关...,下面的实例是使用window.URL.createObjectURL()实现本地图片预览功能; <!...() 创建URL对象 // 把新的URL对象赋值给img.src属性 newImg.src = window.URL.createObjectURL(this.files[0]); newImg.onload

    1.2K140

    基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览

    最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多。在上传图片之前验证图片的格式,并同时实现预览。...这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能。...//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL...============================================================================== 注:这篇博文需要和下篇博文结合起来看,预览上传才完整...,同时实现预览,兼容各种浏览器+下载 基于asp.net+ easyui框架,js提交图片,实现先上传图片再提交表单 基于asp.net + easyui框架,一步步学习easyui-datagrid—

    1.8K20
    领券