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

js上传图片及预览功能实例分析

 更新时间：2015年04月24日 12:00:53   作者：html5前端技术分享  
这篇文章主要介绍了js上传图片及预览功能,实例分析了javascript操作图片上传预览功能的实现方法,需要的朋友可以参考下

本文实例讲述了js上传图片及预览功能。分享给大家供大家参考。具体分析如下：

参考了网上一些人代码写了一个上传图片及时预览的功能

<img id="imgTag" style="height: 100px;" alt="" />
<input type="file" />

function DisplayImage(fileTag,imgTagId){
var allowExtention=".jpg.png.gif";
var extentionArr=fileTag.value.split('.');
var extention = extentionArr[extentionArr.length-1];
if(!(allowExtention.indexOf(extention)>-1)){
alert("Please upload image!");
}else{
//for adveced broswer(the newest ie,chrome,ff)
if(typeof(FileReader)!=="undefined"){
var reader = new FileReader();
reader.readAsDataURL(fileTag.files[0]);
reader.onload = function(e){
document.getElementById(imgTagId).setAttribute("src", e.target.result);
}
}else{
//for(ie6)
document.getElementById(imgTagId).setAttribute("src",fileTag.value);
}
}
}

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

您可能感兴趣的文章:

相关文章

  • javascript实现控制文字大中小显示

    javascript实现控制文字大中小显示

    网页上可以自由改变字体大小是个非常有助于用户体验的小功能，现在许多网站上都有此功能，今天我们来简单实现下。
    2015-04-04
  • 前端的框架TDesign小程序组件库体验

    前端的框架TDesign小程序组件库体验

    TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • javascript局部自定义鼠标右键菜单

    javascript局部自定义鼠标右键菜单

    这篇文章主要为大家详细介绍了javascript局部自定义鼠标右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 使用GruntJS构建Web程序之安装篇

    使用GruntJS构建Web程序之安装篇

    Gruntjs是JavaScript项目的构建工具，也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等。
    2014-06-06
  • 面向JavaScript入门初学者的二叉搜索树算法教程

    面向JavaScript入门初学者的二叉搜索树算法教程

    二叉搜索树则是二叉树的一种,但它只允许你在左侧节点储存比父节点小的值,右侧只允许储存比父节点大的值,这篇文章主要给大家介绍了关于JavaScript二叉搜索树算法的相关资料,需要的朋友可以参考下
    2021-09-09
  • javascript一个无懈可击的实例化XMLHttpRequest的方法

    javascript一个无懈可击的实例化XMLHttpRequest的方法

    由于IE新旧版本以及与其他浏览器在ajax技术上的不同，往往需要对不同的浏览器做不同的处理，除了笨拙的浏览器嗅探技术，大约也就是对象检测技术可用了。
    2010-10-10
  • javascript解决小数的加减乘除精度丢失的方案

    javascript解决小数的加减乘除精度丢失的方案

    这篇文章主要介绍了javascript解决小数的加减乘除精度丢失的方案的相关资料以及JavaScript中关于丢失数字精度的问题的探讨，非常的详细,需要的朋友可以参考下
    2016-05-05
  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码

    这篇文章主要介绍了微信小程序五星评分效果实现代码的相关资料,需要的朋友可以参考下
    2017-04-04
  • axios对外出口API的设计方法

    axios对外出口API的设计方法

    本文我们讲解了 axios 对外出口 API 是如何设计的,我们首先介绍了内部 Axios 类的实现,这是 axios 核心逻辑所在,其次为了让出口 API 更好使用,最后又在增加了 create() 方法,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-05-05
  • JS实现的贪吃蛇游戏案例详解

    JS实现的贪吃蛇游戏案例详解

    这篇文章主要介绍了JS实现的贪吃蛇游戏,结合具体案例形式分析了javascript实现贪吃蛇的相关步骤、原理、算法操作技巧与相关注意事项,需要的朋友可以参考下
    2019-05-05

最新评论