用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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
node+multer实现图片上传的示例代码
Feb 18 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生成静态页面详解
2006/12/05 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
后勤主管工作职责
2013/12/07 职场文书
个人自我剖析材料
2014/02/07 职场文书
客服部班长工作责任制
2014/02/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
介绍信格式
2015/01/30 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书