用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 相关文章推荐
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
用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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
package.json各个属性说明详解
2020/03/11 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
张丽莉事迹观后感
2015/06/16 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android