用js实现预览待上传的本地图片


Posted in Javascript onMarch 15, 2007

<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
 if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){ 
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img");      img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
 }
}else{
alert("您选择的似乎不是图像文件。");
}}
</script> 

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
validform表单验证的实现方法
Mar 08 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 #Javascript
Z-Blog中用到的js代码
Mar 15 #Javascript
htm调用JS代码
Mar 15 #Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 #Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 #Javascript
js实现的网站首页随机公告随机公告
Mar 14 #Javascript
newxtree.js代码
Mar 13 #Javascript
You might like
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python yield 使用方法浅析
2017/05/20 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
党支部四风整改方案
2014/10/25 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS