用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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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/10/09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python装饰器基础详解
2016/03/09 Python
Python类属性的延迟计算
2016/10/22 Python
git进行版本控制心得详谈
2017/12/10 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python实现邮件自动发送
2019/08/10 Python
python3 mmh3安装及使用方法
2019/10/09 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
this关键字的含义
2015/04/08 面试题
护理专科自荐书范文
2014/02/18 职场文书
大学军训感言600字
2014/02/25 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
环保志愿者活动方案
2014/08/14 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android