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 Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
js实现双人五子棋小游戏
May 28 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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
Ajax PHP分页演示
2007/01/02 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python数据可视化图实现过程详解
2020/06/12 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
运动会100米解说词
2014/01/23 职场文书
毕业留言寄语大全
2014/04/10 职场文书
信息管理专业自荐书
2014/06/05 职场文书
作文评语怎么写
2014/12/25 职场文书
委托书英文
2015/01/28 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
个人工作保证书
2015/02/28 职场文书
学生会任命书范本
2015/09/21 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python