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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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中设置多级目录session的问题
2011/08/08 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript类型转换示例
2014/04/29 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
移动端js图片查看器
2016/11/17 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python二叉树的实现实例
2013/11/21 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
交通事故协议书范本
2014/11/18 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers