JS上传图片前实现图片预览效果的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了JS上传图片前实现图片预览效果的方法。分享给大家供大家参考。具体实现方法如下:

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS上传图片前的图片预览效果</title>

</head>

<body>

<input id="myfile" type="file" />

<br />

<img src="/images/logo.gif" alt="Image to be upload." />

<div id="info"></div>

<script type="text/javascript">

var dFile = document.getElementById('myfile');

var dImg = document.getElementsByTagName('img')[0];

var dInfo = document.getElementById('info');

dFile.onchange = function(){

 if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}

 if(dFile.files){

  dImg.src = dFile.files[0].getAsDataURL();

 }else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){

  dImg.src = dFile.value;

 }

}

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JavaScript手机振动API
Jun 11 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 #Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 #Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 #Javascript
js实现在网页上简单显示时间的方法
Mar 02 #Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 #Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 #Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 #Javascript
You might like
php的PDO事务处理机制实例分析
2017/02/16 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js导出txt示例代码
2014/01/14 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
解析python实现Lasso回归
2019/09/11 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python的Jenkins接口调用方式
2020/05/12 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
PHP面试题及答案一
2012/06/18 面试题
个人承诺书
2014/03/26 职场文书
大学生入党群众意见书
2015/06/02 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP