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

更新时间：2015年02月09日 15:02:09 作者：hukang00

这篇文章主要介绍了js实现上传图片预览的方法,通过自定义函数结合onchange方法实现上传图片的预览功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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" />

运行效果如下图所示：

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

您可能感兴趣的文章:

javascript中强制执行toString()具体实现
Javascript通常会根据方法或运算符的需要而自动把值转成所需的类型，这可能导致各种错误，接下来为大家介绍下javascript如何强制执行toString()，感兴趣的朋友可以参考下哈
2013-04-04
怎么理解wx.navigateTo的events参数使用详情
这篇文章主要介绍了怎么理解wx.navigateTo的events参数使用详情，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
js弹出层包含flash 不能关闭隐藏的2种处理方法
js弹出层包含flash 不能关闭隐藏的2种处理方法，需要的朋友可以参考一下
2013-06-06
Promise面试题详解之控制并发
promise面试中经常会遇到的一个问题就是关于控制并发的，所以下面这篇文章主要给大家介绍了关于Promise面试题之控制并发的相关资料，需要的朋友可以参考下
2021-05-05
细说webpack源码之compile流程-rules参数处理技巧(1)
webpack作为一种流行的打包工具被广泛应用在web项目的前端工程化构建中。下面通过本文给大家介绍webpack源码之compile流程-rules参数处理技巧，感兴趣的朋友一起看看吧
2017-12-12
微信小程序仿抖音视频之整屏上下切换功能的实现代码
这篇文章主要介绍了微信小程序仿抖音视频之整屏上下切换功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
JavaScript必知必会(六) delete in instanceof
这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JavaScript中你不知道的Object.entries用法
大家应该都知道,Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致,这篇文章主要给大家介绍了关于JavaScript中你不知道的Object.entries用法的相关资料,需要的朋友可以参考下
2021-10-10
微信小程序轮播图swiper代码详解
swiper组件是滑块视图容器，主要用来做图片轮播。这篇文章主要给大家介绍了关于微信小程序轮播图swiper代码的相关资料,需要的朋友可以参考下
2020-12-12
flash调用js中的方法,让js传递变量给flash的办法及思路
前几天发表了将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。
2013-08-08