javascript实现上传图片前的预览(TX的面试题)


Posted in Javascript onAugust 20, 2007

以前不知道 file 控件也能使用 onchange,导致面试时失去良机。

<script>
function yulan()
{
var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length)
        fileext=fileext.toLowerCase()

        if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp'))
        {
            alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
             document.form1.UpFile.focus();
        }
        else
        {
        //alert(''+document.form1.UpFile.value)//把这里改成预览图片的语句
  document.getElementById("preview").innerHTML="<img src='"+document.form1.UpFile.value+"' width=120 style='border:6px double #ccc'>"
        }

}
</script>
<form name="form1" method="POST" enctype="multipart/form-data">
<input type="file" name="UpFile" size="46" onchange="yulan()">
<div id="preview"></div>
</form>

Javascript 相关文章推荐
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
Bootstrap布局方式详解
May 27 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JavaScript手风琴页面制作
May 17 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
微信小程序实现简单表格
Feb 14 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 #Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 #Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 #Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 #Javascript
js类中获取外部函数名的方法
Aug 19 #Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 #Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 #Javascript
You might like
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
mint-ui在vue中的使用示例
2018/04/05 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
英语老师推荐信
2014/02/26 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
加班费申请报告
2015/05/15 职场文书