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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python处理xml文件的方法小结
2017/05/02 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python Celery多队列配置代码实例
2019/11/22 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
干部现实表现材料
2014/02/13 职场文书
《童趣》教学反思
2014/02/19 职场文书
课程设计的心得体会
2014/09/03 职场文书
离职信范本
2015/06/23 职场文书
工作简报范文
2015/07/21 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电