详细内容请点击

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

<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. linux环境新增用户和所属组

    1.查看用户和组信息命令: 1.1 cat /etc/passwd /etc/passwd 存储有关本地用户的信息. 1)username        UID到名称的一种映射,用户名 2)passw ...

  2. ActionBarCompat

    布局文件中添加menu menu_main.xml <?xml version="1.0" encoding="utf-8"?> <menu ...

  3. arm_cm4.c关于kinetis的修改

    /***********************************************************************/ /* * Initialize the NVIC t ...

  4. PL/pgSQL学习笔记之三

    http://www.postgresql.org/docs/9.1/static/plpgsql-overview.html 39.1.2. Supported Argument and Resul ...

  5. mina高并发短连接导致java.io.IOException: Too many open files解决方案

    http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...

  6. linux命令备忘

    yum info softname 查看安装包信息 yum install softname 安装包名 安装 nginx http://jingyan.baidu.com/article/aa6a2c ...

  7. 提升jQuery开发技能的教程

    iPhone-like Sliding Headers Simple jQuery Spy Effect Simple use of Event Delegation Adding Keyboard ...

  8. 第七届ACM趣味程序设计竞赛第四场(正式赛) 题解

    Final Pan's prime numbers 题目连接: http://acm.uestc.edu.cn/#/problem/show/1272 题意 给你n,要求你在[4,n]范围内找到一个最 ...

  9. 设备\Device\Harddisk1\DR1 有一个不对的区块

    近期遇到一个windows上的Oracle DB system表空间有问题.然后第一个反应就是查看windows的日志查看器,确实发现了报错: 设备\Device\Harddisk1\DR1 有一个不 ...

  10. 【JavsScript】Ember.js

    现在,我们经常都可以看到复杂的JavaScript应用程序,由于这些应用程序变得越来越复杂,一长串的jQuery回调语句或者通过应用程序在各个状态执行不同的函数调用,这些做法都会变得无法再让人接受,这 ...