javascript实现上传图片前的预览(TX的面试题)


Posted in Javascript onAugust 20, 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 相关文章推荐
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 #Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 #Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 #Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 #Javascript
js类中获取外部函数名的方法
Aug 19 #Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 #Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
Augularjs-起步详解
2016/07/08 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python中模块string.py详解
2017/03/12 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
商务英语本科生的自我评价分享
2013/11/15 职场文书
相亲大会策划方案
2014/06/05 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2014年党小组工作总结
2014/12/20 职场文书
欢迎词怎么写
2015/01/23 职场文书
写给女朋友的保证书
2015/05/09 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
教你一步步实现一个简易promise
2021/11/02 Javascript
php修改word的实例方法
2021/11/17 PHP
java版 联机五子棋游戏
2022/05/04 Java/Android