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

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

预览图片 1

    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon"><img :src="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) {that.visible = true;that.imgUrl = this.result;}},

预览图片 2

    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon"><img :src="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是是否显示控制栏

input选择视频或图片本地预览问题相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
javascript显示本地服务器图片,JavaScript图片本地预览功能的实现方法
这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下本文实例讲述了Ja ...
element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片点击图片查看大图,点击图片右上角"×"删除此图点击 ...
本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
JS实现图片上传时的本地预览，兼容IE和firefox谷歌
旁白: 一般来说如果要实现在上传前预览图片的话,用纯服务器端的语言必定是办不到的,需要先传到服务器上,哪怕是只是服务器上的临时文件,这也是个很麻烦的事情,不过可以用javascript来做这件事.下面 ...
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...

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

预览图片 1

预览图片 2

预览视频

input选择视频或图片本地预览问题相关推荐

最新文章

热门文章