用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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js获取div高度的代码
Aug 09 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 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
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
学习ExtJS form布局
2009/10/08 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
nodeJS微信分享
2017/12/20 NodeJs
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python中通过预先编译正则表达式提高效率
2017/09/25 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
有个性的自我评价范文
2013/11/15 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
师德建设实施方案
2014/03/21 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
实习生个人总结范文
2015/02/28 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫