本地文件预览器

PROMULGATOR

╃仰?ヨ?°

中国

← 自定义选号代码

→ css简单2D动画（原创）

相关代码

html 上传图片本地预览

jquery点击图片放大预览，且鼠标滚轮缩放

jquery上传预览

超简单的图片预览效果

js上传图片预览

上传图片预览功能

jquery上传图片预览

Html

Css

Js

请选择带有图片的文件夹查看效果

 .container {
	display:flex;
	flex-direction:row;
}
.container #left {
	width:50%;
	display:flex;
	flex-direction:column;
}
.container #right {
	width:40%;
	display:flex;
	flex-direction:column;
	position:fixed;
	right:0;
}

document.getElementById("folder").addEventListener(
    "change",
    function(e) {
        var files = e.target.files;
        console.log(files);
        for (var i = 0, f;
            (f = files[i]); i++) {
            if (f.name !== "https://www.jq22.com/img/cs/500x500-1.png") {
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var fileType = theFile.type;
                        if (fileType.startsWith("image/")) {
                            var img = document.createElement("img");
                            img.src = e.target.result;
                            document.querySelector("#left").appendChild(img);
                        } else if (fileType.startsWith("audio/")) {
                            console.log(theFile);
                            var filename = document.createElement("p");
                            filename.innerText = theFile.name;
                            document.querySelector("#right").appendChild(filename);
                            var audio = document.createElement("audio");
                            audio.controls = true;
                            audio.loop = true;
                            audio.src = e.target.result;
                            document.querySelector("#right").appendChild(audio);
                        }
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        }
    },
    false
);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

本地文件预览器



代码描述：展示本地文件夹中的图片和音频文件

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>本地文件预览器-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号