用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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
H5上传本地图片并预览功能
May 08 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python中join()方法介绍
2018/10/11 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python 实现波浪滤镜特效
2020/12/02 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
乡镇创先争优活动总结
2014/08/28 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
中学总务处工作总结
2015/08/12 职场文书
python内置进制转换函数的操作
2021/06/02 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python