详细内容请点击

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

<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. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

  2. Ubuntu ENet 的下载和编译

    ENet的目的是提供一个相对轻便.简单和强大的网络通信层的UDP(用户数据报协议). 它提供的主要功能是可选的.可靠的.顺序的数据包发送. ENet省略了一些更高层次的网络功能,如身份验证.加密,尤其 ...

  3. Matrix对bitmap的一些操作

    本篇文章是对使用Matrix对bitmap的旋转与镜像水平垂直翻转进行了详细的分析介绍,需要的朋友参考下  Bitmap convert(Bitmap a, int width, int height ...

  4. The J1850 Core

    http://www.digidescorp.com/wp-content/uploads/2012/02/J1850-Datasheet-pdf.pdf

  5. PL/pgSQL学习笔记之十一

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.4. Row 类型 name table_name%R ...

  6. SCCM客户端推送/卸载

    站点配置--站点--层次结构设置--自动批准客户端 ccm客户端安装日志:服务器端的ccm.log安装ccm客户端,需要添加一个具有访问客户端$admin权限的账户,如下:站点名称-右键 客户端安装设 ...

  7. 读loadBalance技术的一些笔记

    以前知道loadbalance的原理,但是仅仅是浅浅的了解过,今天看了一篇 10多年前 一位大神级别人物 写的文章 顿时学习了 http://www.linuxvirtualserver.org/zh ...

  8. 让python整型计算结果为浮点型

    这是个入门知识,我记录下. 在python中,默认情况下,如果表达式中全是整型,结果也会仅仅是整型.有时候没注意会出现意想不到的结果,比如: >>> a = 7 >>&g ...

  9. getElementById getElementsByName 赋值

      <script type="text/javascript">                            window.onload=function ...

  10. TP复习9

    配置文件 'TMPL_TEMPLATE_SUFFIX'=>'.html',//更改模板文件后缀名'TMPL_FILE_DEPR'=>'_',//修改模板文件目录层次'TMPL_DETECT ...