<body>

    <div class="box">

        <div class="container">

            <ul>

                <li>

                    <form id="index" enctype='multipart/form-data' style="display:none;">

                        <div class="form-group">

                            <label for="upteainput">上传文件</label>

                            <input id="upteainput_index" name="upfile" type="file" class="form-control-file">

                        </div>

                    </form>

                    <div class="img_box1">

                            <video width="100%" height="200" controls="" controlslist="nodownload nofullscreen" id="video" class="index" src="">

                            </video>

                    </div>

                </li>

            </ul>

        </div>

    </div>

    <script src="./jquery.min.js"></script>

    <script>

        $(".img_box1").click(function () {

            $("#upteainput_index").click();

        })

        let uploadFile;

        $("#upteainput_index").change(function () {

            uploadFile = $("#upteainput_index")[0].files[0];

            // console.log(uploadFile)

            //创建文件读取对象

            var reader = new FileReader();

            reader.readAsDataURL(uploadFile);

            //文件读取完毕

            reader.onload = function(){

                console.log(this.result)

                $(".index").attr("src", this.result)

            }

        });

    </script>

</body>

后续操作可以继续参照 : https://www.cnblogs.com/ukzq/p/10687402.html (前端组员改善了页面代码,但先不贴出来了)

[js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)的更多相关文章

  1. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  3. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  4. js实现本地的图片压缩上传预览

    js在设计时考虑到安全的原因是不允许读写本地文件的,随着html5的出现提供了fileReader AP从而可以I实现本地图片的读取预览功能, 另外在移动端有的限制图片大小的需求,主要是考虑图片过大会 ...

  5. React + js-xlsx构建Excel文件上传预览功能

    首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...

  6. PHP文件上传预览

    主页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  7. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

  8. 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  9. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

随机推荐

  1. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  2. Oracle课程档案，第七天

    数据库管理 关闭数据库有4中方式: 1.shutdown modes 关机模式 2.shutdown normal 关机正常 3.shutdown immediate 立即关闭 ★★ 常用命令 4.s ...

  3. 编写函数求整形数组a中存储的m个不重复的整数的第k大的整数(其中m>=1,1<=k<=m)很简单的一个思路是酱紫的：管他辣么多干啥，上来一把排序然后直接得答案

    /** * @author:(LiberHome) * @date:Created in 2019/2/28 20:38 * @description: * @version:$ *//*编写函数求整 ...

  4. ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接

    Traceback (most recent call last): File "C:\Users\Administrator\AppData\Local\Programs\Python\P ...

  5. ES6 数值

    数值的表示 二进制表示法新写法: 前缀 0b 或 0B . console.log(0b11 === 3); // true console.log(0B11 === 3); // true 八进制表 ...

  6. 【Python全栈-后端开发】Django入门基础-2

    Django入门基础知识-2 一 .模版 一.模版的组成 HTML代码+逻辑控制代码 二.逻辑控制代码的组成 1  变量(使用双大括号来引用变量) {{var_name}} 2  标签(tag)的使用 ...

  7. 身份证运算符 is 和 is not(检查两个数据在内存当中是否是同一个值) | 逻辑运算符 and or not | 数据类型的判断 isinstance

    # ###身份证运算符 is 和 is not(检查两个数据在内存当中是否是同一个值) var1 = 6 var2 = 6 print(id(var1),id(var2)) var1 = " ...

  8. stl string的erase方法

    ; i < s.size(); i++) { ') { s.erase(i,); i--; } } 删除string中的所有0.

  9. shell脚本遍历当前目录下以数字命名的目录，并打印

    #!/bin/bash single='' #定义以个位数为目录的集合double='' #定位十位数为目录的集合#按照需要可以根据实际情况再定义以百位数为目录的集合 for dir in `ls - ...

  10. 如何为 SpringMVC 编写单元测试：普通 Controller 测试(转)

    前一篇文章我们已经知道如何配置使用了 SpringMVC 测试框架的单元测试. 现在我们就该亲身实践下如何为普通 Controller 编写单元测试了. 接下来一个很明显的问题就是: 什么是普通 Co ...