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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
浅析Ajax语法
Dec 05 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
JavaScript 原型与原型链详情
Nov 02 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 日期时间处理函数小结
2009/12/18 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
3.12植树节活动总结2014
2014/03/13 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python