Windows.url.createObjectURL()

本文介绍如何利用URL.createObjectURL方法实现图片上传时的实时预览功能。此方法能够生成临时URL,使得开发者可以在文件选择后立即显示所选图片,提高用户体验。文章还提供了示例代码以展示具体实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Windows.url.createObjectURL()在 图片上传预览中使用。

 概述:为创建一个新的URL对象

objectURL=windows.URL.vreateObjectURL(blod);

blod 参数是File对象或者是Blod对象,

  • objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.
  • 在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
 $uploaderInput.on("change", function(e){
            console.log(":"+e.target.files);
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    if (url) {
                        src = url.createObjectURL(file); console.log(":"+src);
                    } else {
                        src = e.target.result;
                    }
                    $uploaderFiles.empty();  
                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
            });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值