脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现上传图片预览

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;
    }
    }
}

调用：

复制代码 代码如下:
上传图片:&nbsp;&nbsp;&nbsp;<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>

运行效果如下图所示：

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

您可能感兴趣的文章:

相关文章

  • 使用JavaScript和C#中获得referer

    使用JavaScript和C#中获得referer

    经常使用其他脚本语言（ASP ASP.NET PHP等）获取页面的浏览来源，今天我们来研究下使用Javascript以及C#获取页面的referer。
    2014-11-11
  • JavaScript中undefined和null的区别

    JavaScript中undefined和null的区别

    这篇文章主要介绍了 JavaScript中undefined和null的区别的相关资料,需要的朋友可以参考下
    2017-05-05
  • 三种方式获取XMLHttpRequest对象

    三种方式获取XMLHttpRequest对象

    这篇文章主要介绍了获取XMLHttpRequest对象的三种方式,需要的朋友可以参考下
    2014-04-04
  • 分享Javascript实用方法二

    分享Javascript实用方法二

    javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，本文给大家分享javascript实用方法二，感兴趣的朋友一起学习吧
    2015-12-12
  • H5 js点击按钮复制文本到粘贴板

    H5 js点击按钮复制文本到粘贴板

    这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS+CSS模拟可以无刷新显示内容的留言板实例

    JS+CSS模拟可以无刷新显示内容的留言板实例

    这篇文章主要介绍了JS+CSS模拟可以无刷新显示内容的留言板,涉及javascript操作dom元素、鼠标事件及css样式的技巧,需要的朋友可以参考下
    2015-03-03
  • javascript中的面向对象

    javascript中的面向对象

    本文主要介绍了javascript中面向对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • javascript 常用功能总结

    javascript 常用功能总结

    javascript 常用功能总结，学习js的朋友可以参考下
    2012-03-03
  • 详细聊聊JavaScript是如何影响DOM树构建的

    详细聊聊JavaScript是如何影响DOM树构建的

    DOM (Document Object Model) 的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,这篇文章主要给大家介绍了关于JavaScript是如何影响DOM树构建的相关资料,需要的朋友可以参考下
    2021-08-08
  • 向当前style sheet中插入一个新的style实现方法

    向当前style sheet中插入一个新的style实现方法

    今天为了临时解决页面样式问题，为了方便，直接在这个公共的js里面向style sheet插入新的style rule，感兴趣的朋友可以出纳卡下哈
    2013-04-04

最新评论