JS预览图像将本地图片显示到浏览器上


Posted in Javascript onAugust 25, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<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); 
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;" /> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 #Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 #Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
JS 两个字符串时间的天数差计算
Aug 25 #Javascript
js中onload与onunload的使用示例
Aug 25 #Javascript
You might like
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
JavaScript Split()方法
2015/12/18 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
django模板结构优化的方法
2019/02/28 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Django异步任务线程池实现原理
2019/12/17 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
火锅店的活动方案
2014/08/15 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js