详细内容请点击

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

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

学习来源:http://www.j--d.com/js/385.html

更多js特效请点击

js上传图片及预览功能的更多相关文章

  1. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  2. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  3. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. js上传图片并预览

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. html上传图片的预览功能实现

    表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...

  8. JS页面打印预览功能

    点击按钮后就可以直接打印预览,并且隐藏了按钮,如果你不希望按钮显示,可以把那部分代码删除就可以了. <html><head><meta http-equiv=" ...

  9. 上传图片带预览功能兼容IE和火狐等主流浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 升级xcode时更换appid账户

    转自:http://blog.csdn.net/zhuzhihai1988/article/details/39803743 为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,而 ...

  2. 收集计算机分区信息,去除列中的重复值(Excel)(空行)

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  3. tomcat配置文件server.xml具体解释

    元素名 属性 解释 server port 指定一个port,这个port负责监听关闭tomcat 的请求 shutdown 指定向port发送的命令字符串 service name 指定servic ...

  4. BZOJ 2751: [HAOI2012]容易题(easy) 数学

    2751: [HAOI2012]容易题(easy) 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2751 Description 为了使 ...

  5. Codeforces Round #181 (Div. 2) A. Array 构造

    A. Array 题目连接: http://www.codeforces.com/contest/300/problem/A Description Vitaly has an array of n ...

  6. Codeforces Good bye 2015 B. New Year and Old Property dfs 数位DP

    B. New Year and Old Property 题目连接: http://www.codeforces.com/contest/611/problem/B Description The y ...

  7. hdu 5272 Dylans loves numbers 水题

    Dylans loves numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem. ...

  8. C#中的ICollection接口

    一.集合类: 1.1 ICollection接口 前面我们学习了数组,这是.net Framework定义的最基本的集合类型,除过数组外,.net Framework还另外定义了很多集合类型以满足编程 ...

  9. linux C高手成长过程---书籍推荐

    建议学习路径: 首先先学学编辑器,vim, emacs什么的都行. 然后学make file文件,只要知道一点就行,这样就可以准备编程序了. 然后看看<C程序设计语言>K&R,这样 ...

  10. spring框架七大模块

    1. Spring Core: Core封装包是框架的最基础部分,提供IOC和依赖注入特性.这里的基础概念是BeanFactory,它提供对Factory模式的经典实现来消除对程序性单例模式的需要,并 ...