用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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
微信小程序一周时间表功能实现
Oct 17 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
Laravel 5框架学习之表单验证
2015/04/08 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript call方法使用说明
2010/01/11 Javascript
input的focus方法使用
2010/03/13 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
django fernet fields字段加密实践详解
2019/08/12 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
如何将json数据转换为python数据
2020/09/04 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
自考生自我评价分享
2014/01/18 职场文书
简历里的自我评价
2014/01/31 职场文书
公司管理建议书范文
2014/03/12 职场文书
关于环保的标语
2014/06/13 职场文书
授权委托书格式范文
2014/08/02 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书