用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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
JavaScript 事件系统
Jul 22 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
深入探寻javascript定时器
Jan 02 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
react 路由Link配置详解
Nov 11 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 源代码压缩小工具
2009/12/22 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
php中数组最简单的使用方法
2020/12/27 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
python中使用psutil查看内存占用的情况
2018/06/11 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python super()方法原理详解
2020/03/31 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
给分销商的致歉信
2014/01/14 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
总经理致辞
2015/07/29 职场文书
2016大一新生军训感言
2015/12/08 职场文书
党员读书活动心得体会
2016/01/14 职场文书
医学会议开幕词
2016/03/03 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android