es5预览本地文件、es6练习代码演示案例
2017-12-19 18:14
399 查看
es6简单基础:
2.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>预览本地文件</title> <style type="text/css"> video{ background-color: #000; } </style> <script type="text/javascript"> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId){ var url = getFileUrl(sourceId); console.log(sourceId,targetId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> --> <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video> </form> </body> </html>
2.html
相关文章推荐
- js实现文件上传,图片本地预览(部分代码是借鉴的)
- IE预览添加javaScript代码的本地Html文件后会弹出阻止脚本框问题
- iOS上---预览本地ppt,word ,excel,pdf文件
- 演示实现PHP上传文件代码
- Git学习(2)-使用Git 代码将本地文件提交到 GitHub
- 文件上传之本地预览
- opencv读取彩色/灰度图片像素值并存储在本地文件中c++代码实例及运行结果
- php大力力 [029节] 做PHP项目如何下载js文件:使用腾讯浏览器把网上案例页面存储到本地
- 文件IO --APUE第三章原创练习代码
- struts多文件上传案例演示(一)
- 【代码片段】javascript上传文件并预览
- ASP保存远程图片文件到本地代码
- 从URL获取文件保存到本地的代码
- 在服务器端生成Excel文件然后从服务器下载的本地的代码
- git本地仓库拉取远程分支代码/git忽略文件的配置
- java代码编辑器 pdf文件预览 主流SSM 代码生成器 shrio redis websocket即时通讯
- PHP上传文件代码练习2 (重复文章)
- 根据URL从服务器端复制文件到本地java代码
- Json读写本地文件实现代码
- Json读写本地文件实现代码