js实现上传图片预览的方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下:

function PreviewImage(imgFile)

{

    var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);

    filextension=filextension.toLowerCase();

    if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))

    {

    alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");

    imgFile.focus();

    }

    else

    {

    var path;
    if(document.all)//IE

    {

    imgFile.select();

    path = document.selection.createRange().text;

   

    document.getElementById("imgPreview").innerHTML="";

    document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果  

    }

    else//FF

    {

    path = imgFile.files[0].getAsDataURL();

    document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";

    // document.getElementById("img1").src = path;

    }

    }

}

调用:

上传图片:   <input type="file" name="file"

      style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">

</div>

运行效果如下图所示:

js实现上传图片预览的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
jquery实现相册一下滑动两次的方法
Feb 09 #Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 #Javascript
angularJS 入门基础
Feb 09 #Javascript
javascript中函数作为参数调用的方法
Feb 09 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python输入二维数组方法
2018/04/13 Python
详解python读取image
2019/04/03 Python
Django 用户认证组件使用详解
2019/07/23 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
哪些情况下不应该使用索引
2015/07/20 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
经典英文广告词
2014/03/18 职场文书
《菜园里》教学反思
2014/04/17 职场文书
2015年班干部工作总结
2015/04/29 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript