用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 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
移动节点的jquery代码
Jan 13 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
mouse_on_title.js
2006/08/25 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
python基础教程之字典操作详解
2014/03/25 Python
利用python代码写的12306订票代码
2015/12/20 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python读取与处理netcdf数据方式
2020/02/14 Python
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
网络宣传方案
2014/03/15 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
党员民主生活会材料
2014/12/15 职场文书
重阳节简报
2015/07/20 职场文书
运动会主持人开幕词
2016/03/04 职场文书
如何拟写通知正文?
2019/04/02 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang