input type="file" 多视频上传并且进行预览

直接上代码了，，简单粗暴点。

首先大家需要知道，
accept 属性只能与<input type="file">配合使用。它规定能够通过文件上传进行提交的文件类型。
如果不限制视频的格式，可以写为：accept="video/*"

html代码

<input type="file" id="file" name="file" onchange="videoPreview(this)" />  <div class="videoBox" id="videoBox"></div>

js代码

<script type="text/javascript">
        function videoPreview(source) {
            var file = source.files[0];
            console.log(source.files);

            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function (e) {
                    var video = document.createElement("video");
                    video.controls = "controls";
                    video.src = e.target.result;
                    video.width = 300;
                    video.height = 200;
                    document.getElementById("videoBox").appendChild(video);
                };
                fr.readAsDataURL(file);
            }
            document.getElementById("file").value = "";

        }
    </script>

备注：FileReader 对象还有很多用法，就不一一说了，大家如果有兴趣的话请**点击这里**查看。

来源：CSDN

作者：您的昵称已被注册

链接：https://blog.csdn.net/weixin_42933320/article/details/103458752