1. <body>
  2.     <div class="box">
  3.         <div class="container">
  4.             <ul>
  5.                 <li>
  6.                     <form id="index" enctype='multipart/form-data' style="display:none;">
  7.                         <div class="form-group">
  8.                             <label for="upteainput">上传文件</label>
  9.                             <input id="upteainput_index" name="upfile" type="file" class="form-control-file">
  10.                         </div>
  11.                     </form>
  12.                     <div class="img_box1">
  13.                             <video width="100%" height="200" controls="" controlslist="nodownload nofullscreen" id="video" class="index" src="">
  14.                             </video>
  15.  
  16.                     </div>
  17.                 </li>
  18.  
  19.             </ul>
  20.         </div>
  21.     </div>
  22.  
  23.     <script src="./jquery.min.js"></script>
  24.     <script>
  25.         $(".img_box1").click(function () {
  26.             $("#upteainput_index").click();
  27.         })
  28.  
  29.         let uploadFile;
  30.         $("#upteainput_index").change(function () {
  31.             uploadFile = $("#upteainput_index")[0].files[0];
  32.             // console.log(uploadFile)
  33.  
  34.             //创建文件读取对象
  35.             var reader = new FileReader();
  36.             reader.readAsDataURL(uploadFile);
  37.             //文件读取完毕
  38.             reader.onload = function(){
  39.                 console.log(this.result)
  40.                 $(".index").attr("src", this.result)
  41.             }
  42.         });
  43.  
  44.     </script>
  45. </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. Promise及Async/Await

      一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...

  2. thinkphp5中使用phpmailer实现发送邮件功能(转载)

    一.开启SMTP服务(使用php发送邮件需要用到SMTP服务,这里以163邮箱的SMTP服务为例). 1.登录163邮箱,在首页上找到“设置”. 2.选择开启的服务,一般都全选,POP3/SMTP/I ...

  3. 阿里云 ECS 迁移到七牛 QVM 记

    操作 下载脚本 curl -O http://p70nwjoid.bkt.clouddn.com/go2qvm_client1.5_linux_x86_64.zip 解压填写配置 unzip go2q ...

  4. Jquery 获取 radio选中值，select选中值

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...

  5. 6.cookie、session，localStorage、sessionStorage

    必须在服务器下运行 cookie/session 存东西 cookie 时间 过期时间 4k 服务器把一部分数据保存在客户端(浏览器) session 回话 时间 服务器存取用户信息 5M local ...

  6. scala-actor线程间通信

    import scala.actors.Actor case class Msg(val info: String, act1: MyActor1) class MyActor extends Act ...

  7. 数据库join操作（MySQL）

    左连接,右连接,内连接 1.原始表:左表user_t,右表user_info 2.执行连接 #LEFT JOIN ; #RIGHT JOIN ; #INNER JOIN ; 2.1左连接:以左边为主 ...

  8. JavaScript 模拟 Dictionary

    function Dictionary() { var items = {}; //判断是否包含Key值 this.has = function(key) { return key in items; ...

  9. 【论文阅读】Deep Adversarial Subspace Clustering

    导读: 本文为CVPR2018论文<Deep Adversarial Subspace Clustering>的阅读总结.目的是做聚类,方法是DASC=DSC(Deep Subspace ...

  10. python框架之Django(5)-O/RM

    字段&参数 字段与db类型的对应关系 字段 DB Type AutoField integer AUTO_INCREMENT BigAutoField bigint AUTO_INCREMEN ...