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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
详解javascript中的事件处理
Nov 06 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
angular4中关于表单的校验示例
2017/10/16 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python 模块导入问题汇总
2021/02/01 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
Servlet面试题库
2015/07/18 面试题
文明家庭先进事迹材料
2014/05/14 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
司机岗位职责范本
2015/04/10 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
你真的会用Mysql的explain吗
2022/03/31 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle