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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 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
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php相当简单的分页类
2008/10/02 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php树型类实例
2014/12/05 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
js焦点文字滚动效果代码分享
2015/08/25 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
js实现抽奖功能
2020/11/24 Javascript
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
《黄河颂》教学反思
2014/02/07 职场文书
岗位安全生产责任书
2014/07/28 职场文书
三方合作意向书范本
2015/05/09 职场文书
2016年端午节寄语
2015/12/04 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python