WEB上传文件预览

最新推荐文章于 2024-06-06 09:02:41 发布

菜鸟小窝

最新推荐文章于 2024-06-06 09:02:41 发布

阅读量361

点赞数

分类专栏： Web前端文章标签：上传文件预览

本文链接：https://blog.csdn.net/qq_25775675/article/details/124945407

版权

Web前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

一、上传图片预览

1、JS版本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        function upload(files) {
            let imageElementStr = "";
            for (let i = 0; i < files.length; i++) {
                let reader = new FileReader();
                reader.readAsDataURL(files[i]);
                reader.onload = function (e) {
                    //result为base64
                    imageElementStr += "<img src='" + e.target.result + "'/>";
                    document.getElementById("imageView").innerHTML = imageElementStr;
                }
            }
        }
    </script>
</head>
<body>
<input type="file" onchange="upload(this.files)" multiple/>
<div id="imageView"></div>
</body>
</html>

2、jquery 版本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".fileInput").change(function () {
                let file = $(this);
                let fileObj = file[0];

                if (fileObj && fileObj.files && fileObj.files[0]) {
                    let windowURL = window.URL || window.webkitURL;
                    let dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $(".image").attr('src', dataURL);
                } else {
                    let dataURL = file.val();
                    $(".image")[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    $(".image")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                }
            });
        })
    </script>
</head>
<body>
    <input type="file" class="fileInput">
    <img class="image">
</video>
</body>
</html>

二、上传视频预览

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".fileInput").change(function () {
                var files = this.files;
                if (!files.length) {
                    return;
                }
                let windowURL = window.URL || window.webkitURL;
                let dataURL = windowURL.createObjectURL(files[0]);
                $("video").attr("src", dataURL);
                $("video").get(0).play();
            });
        })
    </script>
</head>
<body>
<input type="file" class="fileInput">
<video width="400" controls="controls"></video>
</body>
</html>

菜鸟小窝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB上传文件预览

一、上传图片预览1、JS版本<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function upload(files) { let imageElementStr = ""; fo
复制链接

扫一扫