用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 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
js获取内联样式的方法
Jan 27 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
redux-saga 初识和使用
Mar 10 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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动态柱状图实现方法
2015/03/30 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JS中递归函数
2016/06/17 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python pickle模块用法实例
2015/04/14 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Django实现快速分页的方法实例
2017/10/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python 两个数据库postgresql对比
2019/10/21 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python与js主要区别点总结
2020/09/13 Python
python 模拟登陆163邮箱
2020/12/15 Python
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
教育局长自荐信范文
2013/12/22 职场文书
四年级学生评语大全
2014/04/21 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
Pandas数据结构之Series的使用
2022/03/31 Python