input选择视频或图片本地预览问题

原创 2018年04月17日 14:55:52

图片目前可以用两个方法,示例是vue代码,原生用的话需要小改下

预览图片 1


    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
    <img :img="imgUrl" src=""> 

    chooseImgInput(event) { //选择图片加载到图片裁剪工具里
        var that = this;
        var files = document.getElementById("filepicker").files[0];
        this.fileName = files.name;

        var reader = new FileReader();
        reader.readAsDataURL(files);
            reader.onload = function(e) {
            // console.dir(this.result);
            that.visible = true;
            that.imgUrl = this.result;
        }
    },

预览图片 2


    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
    <img :img="imgUrl" src=""> 

    chooseImgInput(event) {
        var files = document.getElementById("filepicker").files[0];
var url = URL.createObjectURL(files);
        this.imgUrl = url;
    },


预览视频 


    <input type="file" id="filepicker" accept="video/mp4" @change="chooseVideoInput" class="uploadVideo_input">
    
    <video id="video" poster="封面图路径" :src="video_url" :controls="controls"
    x5-playsinline="" playsinline="" webkit-playsinline preload="auto"></video>

    chooseVideoInput(event) {
        var files = document.getElementById("filepicker").files[0];
var url = URL.createObjectURL(files);
        this.video_url= url;
    },
    
    :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"
    //这几个属性是解决原生视频video标签在ios手机上自动去安平播放的问题,controls是是否显示控制栏




机器学习之模型评估与选择

本课程主要讲解经验误差与过拟合问题,学习器的评估方法(留出法,交叉验证法,自助法,调参与最终模型),性能度量(错误率与精度,查准率和查全率,ROC与AUV,代价敏感错误率与代价曲线),比较检验(假设检验,交叉t检验,其他检验),偏差与反差等知识点。
  • 2018年01月09日 03:33

h5图片、视频预览、跟表单一起上传

自己遇到的问题: 在网上找了一会没有符合自己条件的,就算有,样式什么的也不愿意自己去改,而且很多只是单独上传图片,预览的, 其实就是拿到所有的file,遍历,让后把file文件放到img标签中 不全废...
  • u012480620
  • u012480620
  • 2016-11-02 16:14:00
  • 4317

【技巧】input选择图片预览

预览效果见下图:HTML代码如下:
  • zuncle
  • zuncle
  • 2017-03-15 17:55:45
  • 2374

Webview打开本地文件、图片选择的解决方案。版本兼容问题

  • 2016年11月09日 10:54
  • 3.44MB
  • 下载

input file 实现图片预览效果

在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但...
  • momo_mutou
  • momo_mutou
  • 2014-08-28 14:03:17
  • 9699

js实现input元素输入图片即时预览

页面选择图片后直接预览,无需引入外部JS
  • Nifury
  • Nifury
  • 2016-09-01 11:55:19
  • 4852

file input标签支持图片、视频、多图上传

1、accept属性 直接打开系统文件目录,规定在文件上传中服务器只接受图像文件 属性值有 只在FF和chrome上有效。 accept能限制的文件有: *.3gpp audio/3g...
  • kirsten_z
  • kirsten_z
  • 2017-03-01 15:20:52
  • 3527

android 选取本地视频或图片

近期做的留言板功能,有从本地选取图片或视频发送到留言板的功能: 点击主页面的图片按钮: case R.id.ll_pic: if (!PermissionHelper.checkPermi...
  • liuye066
  • liuye066
  • 2017-02-27 16:47:35
  • 1761

android选本地图片和本地视频

实际开发中有类似朋友圈的需求可以说很常见,需要选本地图片或者本地视频发布出去。 这是我在网上找的一个比较好的案列,也是我在项目中用到的,可以根据实际需求灵活运用,自行选择只显示本地图片或者本地视频还...
  • BSSYNHDJZMH
  • BSSYNHDJZMH
  • 2016-12-26 09:47:48
  • 479

html选择本地图片即时预览

最近在做一个.net mvc的网站,想让用户在网页中上传图片的过程中预览图片,本以为很简单,以为可以直接在html中解决,百度了很多才发现貌似挺麻烦,综合一些大神的回答,总结了一下。 完成此类操作,...
  • ccutsoft20144264
  • ccutsoft20144264
  • 2016-06-28 23:49:31
  • 5754
收藏助手
不良信息举报
您举报文章:input选择视频或图片本地预览问题
举报原因:
原因补充:

(最多只允许输入30个字)