用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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
再次研究下cache_lite
2007/02/14 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP strripos函数用法总结
2019/02/11 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
深入理解javaScript中的事件驱动
2013/05/21 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python字符串的方法与操作大全
2018/01/30 Python
python保存数据到本地文件的方法
2018/06/23 Python
python中scikit-learn机器代码实例
2018/08/05 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
汽车维修工岗位职责
2014/02/12 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
幼儿教师个人总结
2015/02/05 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
56句经典英文座右铭
2019/08/09 职场文书