用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 二分法(数组array)
Apr 24 Javascript
来自qq的javascript面试题
Jul 24 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python生成验证码实例
2014/08/21 Python
Python封装shell命令实例分析
2015/05/05 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
介绍一下linux的文件权限
2014/07/20 面试题
幼儿园评语大全
2014/04/17 职场文书
班组建设经验交流材料
2014/05/12 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Golang gRPC HTTP协议转换示例
2022/06/16 Golang