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类继承机制的原理分析
Sep 12 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
深入理解Vue 的钩子函数
Sep 05 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
composer.lock文件的作用
2016/02/03 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP实现八皇后算法
2019/05/06 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 数据加密代码
2008/12/24 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
给护士表扬信
2014/01/19 职场文书
精神文明单位申报材料
2014/05/02 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
小学教代会开幕词
2016/03/04 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang