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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
Cookie 小记
2010/04/01 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
深入研究React中setState源码
2017/11/17 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python输出带颜色的字符串实例
2017/10/10 Python
flask入门之表单的实现
2018/07/18 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
django基础学习之send_mail功能
2019/08/07 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
世界上最大的艺术社区:SAA
2020/12/30 全球购物
三年大学自我鉴定
2014/01/16 职场文书
学校安全检查制度
2014/01/27 职场文书
个人现实表现材料
2014/02/04 职场文书
学生周末长期请假条
2014/02/15 职场文书
上班玩手机检讨书
2014/02/17 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python