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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小程序实现文件预览
Oct 22 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Javascript 之封装(Package)
2018/09/14 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
会计助理的岗位职责
2013/11/29 职场文书
财产保全担保书范文
2014/04/01 职场文书
关于保护环境的标语
2014/06/09 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
您对思维方式了解多少?
2019/12/09 职场文书