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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Selenium定位元素操作示例
2018/08/10 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python WEB应用部署的实现方法
2019/01/02 Python
jupyter实现重新加载模块
2020/04/16 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python热力图实现简单方法
2021/01/29 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
高中化学教学反思
2014/01/13 职场文书
见习报告的格式
2014/11/04 职场文书
个园导游词
2015/02/04 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书