用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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Bootstrap基础学习
Jun 16 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Javascript读写cookie的实例源码
Mar 16 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
自动分页的不完整解决方案
2007/01/12 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php的hash算法介绍
2014/02/13 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
详解python之heapq模块及排序操作
2019/04/04 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
出国留学计划书
2014/04/27 职场文书
个人欠款担保书
2014/05/20 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
安全生产月标语
2014/10/07 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
贷款工作证明模板
2015/06/12 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python