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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
微信小程序实现watch监听
Jun 04 Javascript
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中防止SQL注入实现代码
2011/02/19 PHP
php学习笔记之面向对象
2014/11/08 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
django项目搭建与Session使用详解
2018/10/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
超市开店计划书
2014/04/26 职场文书
管理提升方案
2014/06/04 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server