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判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
微信小程序定位当前城市的方法
Jul 19 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 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判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
在webstorm中配置less的方法详解
2020/09/25 Javascript
python 控制语句
2011/11/03 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
Python实现疫情地图可视化
2021/02/05 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
小学生检讨书大全
2014/02/06 职场文书
作文评语大全
2014/04/23 职场文书
体育专业自荐书
2014/05/29 职场文书
计算机网络专业求职信
2014/06/05 职场文书
2014年征兵标语
2014/06/20 职场文书
音乐学专业求职信
2014/07/22 职场文书
车辆委托书范本
2014/10/05 职场文书
春季运动会开幕词
2015/01/28 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js