H5上传前预览视频(结合 video标签 &&h5 fileApi)

2017/09/14 发布

js代码:

// hTML5实现表单内的上传文件框,上传前预览视频,刷新预览video,使用HTML5 的File API,
// 建立一个可存取到该file的url,一个空的video标签,ID为video0,把选择的文件显示在video标签中,实现视频预览功能。
// 需要选择支持HTML API的浏览器。
         $("#video").change(function(){
             var objUrl = getObjectURL(this.files[0]) ;
             console.log("objUrl = "+objUrl) ;
             if (objUrl) {
                 $("#video0").attr("src", objUrl) ;
             }
         }) ;
         //建立一个可存取到该file的url
         function getObjectURL(file) {
             var url = null ;
             if (window.createObjectURL!=undefined) { // basic
                 url = window.createObjectURL(file) ;
             } else if (window.URL!=undefined) { // mozilla(firefox)
                 url = window.URL.createObjectURL(file) ;
             } else if (window.webkitURL!=undefined) { // webkit or chrome
                 url = window.webkitURL.createObjectURL(file) ;
             }
             return url ;
         }

html:

<video style="height:auto;" src="" id="video0" controls="controls"></video>
<input class="form-control" type="file" style="height:auto;"
id="video" name="video"/>

原文地址:https://www.cnblogs.com/mithrandirw/p/8468867.html

时间: 2024-09-29 10:09:07

H5上传前预览视频(结合 video标签 &&h5 fileApi)的相关文章

input file实现多选,限制文件上传类型,图片上传前预览功能

限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性规定输入字段可选择多个值. 示例: <!-- image/* 所有图片 image/png png图片 image/jpg jpg图片 image/gif gir动图 application/msword Word文档(.doc) application/vnd.openxmlform

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

【转】HTML5 jQuery图片上传前预览

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如 谷歌Chrome和火狐等. <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta h

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g

HTML5 FileReader实现图片上传前预览

如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下:

前端图片上传前预览

<!DOCTYPE html> <html> <head> <title>图片上传预览</title> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascri