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


Posted in Javascript onAugust 14, 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实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 #Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 #Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 #Javascript
js 事件小结 表格区别
Aug 13 #Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 #Javascript
javascript下给元素添加事件的方法与代码
Aug 13 #Javascript
javascript引用对象的方法代码
Aug 13 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python对象与引用的介绍
2019/01/24 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python 发送get请求接口详解
2020/11/17 Python
历史学专业个人的自我评价
2013/10/13 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
社区清明节活动总结
2014/07/04 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
内勤岗位职责范本
2015/04/13 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
篮球比赛通讯稿
2015/07/18 职场文书