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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
javascript实现切换td中的值
Dec 05 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
点击弹出层外区域关闭弹出层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
PHP输入流php://input介绍
2012/09/18 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序云开发之数据库操作
2019/05/18 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
我未来的职业规划范文
2014/01/11 职场文书
工作个人的自我评价
2014/01/14 职场文书
解除劳动合同协议书
2014/04/14 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
部队2015年终工作总结
2015/04/02 职场文书
整改通知书
2015/04/20 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python