脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 实现lightBox时的样式与行为分离减少JS

    实现lightBox时的样式与行为分离减少JS

    本教程旨在实现lightBox时的样式与行为分离，减少JS在各方面（全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等）的工作。
    2009-07-07
  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    这篇文章主要介绍了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法,实例分析了javascript操作图片切换方向的幻灯片技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • webpack打包多页面的方法

    webpack打包多页面的方法

    这篇文章主要介绍了webpack打包多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • JavaScript时间戳与时间日期间相互转换

    JavaScript时间戳与时间日期间相互转换

    今天做项目遇到这样的问题，要将获取到的时间转换为时间戳，通过查阅相关资料，问题顺利解决，下面小编把具体实现代码分享到脚本之家平台，需要的朋友参考下
    2017-12-12
  • 解决JavaScript数字精度丢失问题的方法

    解决JavaScript数字精度丢失问题的方法

    这篇文章主要介绍了解决JavaScript数字精度丢失问题的方法，需要的朋友可以参考下
    2015-12-12
  • JavaScript控制两个列表框listbox左右交换数据的方法

    JavaScript控制两个列表框listbox左右交换数据的方法

    这篇文章主要介绍了JavaScript控制两个列表框listbox左右交换数据的方法,实例分析了javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript Math.round() 方法

    JavaScript Math.round() 方法

    math.round()方法将对参数进行四舍五入操作，对js math.round相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Aptos SDK交互实现过程详解

    Aptos SDK交互实现过程详解

    这篇文章主要为大家介绍了Aptos SDK交互实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • js分页工具实例

    js分页工具实例

    这篇文章主要介绍了js分页工具及其具体用法,包括js与css的详细实现代码与使用方法,需要的朋友可以参考下
    2015-01-01
  • JS/jQuery实现DIV延时几秒后消失或显示的方法

    JS/jQuery实现DIV延时几秒后消失或显示的方法

    这篇文章主要介绍了JS/jQuery实现DIV延时几秒后消失或显示的方法,结合实例形式分析了javascript使用setTimeout及jQuery使用delay方法实现延迟显示功能的相关操作技巧,需要的朋友可以参考下
    2018-02-02

最新评论