关于图片预加载事件，点击选择图片后直接显示在页面上

最新推荐文章于 2024-10-11 12:42:44 发布

安宇轩~

最新推荐文章于 2024-10-11 12:42:44 发布

阅读量2.8k

点赞数 3

分类专栏：图片展示文章标签：图片预览

本文链接：https://blog.youkuaiyun.com/weixin_43761686/article/details/86031688

版权

图片展示专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在用户选择图片后立即预加载并显示在网页上的方法。通过使用JavaScript和HTML,结合不同浏览器的兼容性处理，实现了图片的即时预览功能。

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

图片预加载事件，我们如何点击选择图片后直接显示在页面上呢？

呢么我们来看demo详情。如下所示：

页面demo如下所示：

    <img id="photos" src="" width="100" height="100" />
   <input id="files" type="file" onchange="chan(this)" name="files" />

js代码：

<script src="~/Scripts/jquery-1.10.2.js"></script>

//浏览图片
function chan(i) {
var objUrl = getObjectURL(i.files[0]);
if (objUrl) {
$("#photos").attr("src", objUrl); //这里的id是要显示图片位置的Id
}
};
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}