实现图片、音视频文件的上传预览

最新推荐文章于 2024-05-16 13:27:42 发布

胡少侠7

最新推荐文章于 2024-05-16 13:27:42 发布

阅读量7.6k

点赞数

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

本文链接：https://blog.csdn.net/u011974399/article/details/79448763

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在做关于图片和音视频的上传，上传使用的是stream上穿插件，很好用，但是上传之前需要对上传的图片和音视频进行预览，来确定是否删除某些上传文件，先看代码：

stream上传插件地址：http://www.twinkling.cn/（很好用的上传插件）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <script>
        function fileSelected(file, type) {
            var name = file.name;
            console.log(name);

            var path;
            if(type == "img") {
                if(document.all) // IE
                {
                    // ele.select();
                    path = document.selection.createRange().text;
                    document.getElementById("temp").innerHTML = "";
                    document.getElementById("temp").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" +
                        path + "\")"; // 使用滤镜效果
                } else // FF
                {
                    path = URL.createObjectURL(file);
                    document.getElementById("temp").src = path;
                }
            }
            if(type == "video") {
                path = URL.createObjectURL(file);
                // Todo:视频插件创建错误
                document.getElementById("video1").src = path;

                var myVideo = document.getElementById("video1");
                //音量为20%
                myVideo.volume = 0.2;
                /*myVideo.addEventListener("loadedmetadata", function() {
                    initPlayUrl(myVideo.duration);
                }, false);
                myVideo.addEventListener("loadedmetadata", function() {
                    drawVolumeSlider();
                }, false);
                return true;*/
            }
        }

        function choiceImg(e) {
            fileSelected(e.files[0], "img");
        }

        function choiceMusicAndVideo(e) {
            fileSelected(e.files[0], "video");
        }
    </script>

    <body>
        <img src="img/123.jpg" id="temp" style="width: 300px;height: 417px;" />
        <video width="400" height="300" id="video1" autoplay="autoplay" controls="controls" src="img/123.flv">

        </video>
        <input type="file" width="200px" onchange="choiceImg(this)" value="选择图片" />
        <input type="file" width="200px" onchange="choiceMusicAndVideo(this)" value="选择音视频" />
    </body>

</html>

说明：

当input的onchange事件触发的时候，获取选中的文件——this.files[0]
通过使用URL.createObjectURL(file)来生成一个临时的网络路径，最为上传文件的src。

初始化页面：

这里写图片描述

选中后页面：

这里写图片描述

胡少侠7

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
实现图片、音视频文件的上传预览

最近在做关于图片和音视频的上传，上传使用的是stream上穿插件，很好用，但是上传之前需要对上传的图片和音视频进行预览，来确定是否删除某些上传文件，先看代码：stream上传插件地址：http://www.twinkling.cn/（很好用的上传插件） &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt...
复制链接

扫一扫