fileReader接口

最新推荐文章于 2023-07-08 16:42:34 发布

你好吗少年

最新推荐文章于 2023-07-08 16:42:34 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/y670340559/article/details/62416281

H5 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript的fileReader接口进行图片和视频的预览。通过创建FileReader对象，读取文件并设置加载完成后的处理方式，实现了在浏览器中直接显示上传文件的预览效果。对于图片，使用了`<img>`标签加载数据URL；对于视频，使用`<embed>`标签插入预览。

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

function preview(file,preview) {

var prevDiv = document.getElementById(preview);

if (file.files && file.files[0]){

var reader = new FileReader();

reader.onload = function(evt){

prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';

}

reader.readAsDataURL(file.files[0]);

}

else {

prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

}

//视频预览
function preview_(file,preview) {
$("#editv3").click();
$("#"+preview).parent().remove();
/* var prevDiv = document.getElementById(preview);
if (file.files && file.files[0]){
if(window.FileReader) {
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<div align="center"><embed width="300" height="140" src="' + evt.target.result + '" /></div>';
}
reader.readAsDataURL(file.files[0]);
$(".removevedio").show();
// add your code here
}
else {
alert("Not supported by your browser!");
}
}
else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
} */
}