这是基于javascript的一种图片上传即时显示方法，测试结果IE6和火狐浏览器可以正常使用。google浏览器不兼容。

这种方法兼容性比较差，仅供参考，建议使用ajax方法来即时显示图片。

1.首先是javascript代码

/**

 * 图片上传即时显示javascript

 */

var allowExt = [ 'jpg', 'gif', 'bmp', 'png', 'jpeg' ];

var preivew = function(file, container) {

    try {

        var pic = new Picture(file, container);

    } catch (e) {

        alert(e);

    }

};

// 缩略图类定义

var Picture = function(file, container) {

    var height = 0, widht = 0, ext = '', size = 0, name = '', path = '';

    var self = this;

    if (file) {

        name = file.value;

        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {

            file.select();

            path = document.selection.createRange().text;

        } else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {

            if (file.files) {

                path = window.URL.createObjectURL(file.files[0]);

            } else {

                path = file.value;

            }

        }

    } else {

        throw "bad file";

    }

    ext = name.substr(name.lastIndexOf("."), name.length);

    if (container.tagName.toLowerCase() != 'img') {

        throw "container is not a valid img label";

        container.visibility = 'hidden';

    }

    container.src = path;

    container.alt = name;

    container.style.visibility = 'visible';

    height = container.height;

    widht = container.widht;

    size = container.fileSize;

    this.get = function(name) {

        return self[name];

    };

    this.isValid = function() {

        if (allowExt.indexOf(self.ext) !== -1) {

            throw 'the ext is not allowed to upload';

            return false;

        }

    };

};

2.html代码，主要在于onchange方法调用上面的javascript方法，然后是一个用来显示图片的img标签

<body>

    <input name="image"nchange="preivew(this,document.getElementById('img'));"/>

    <img id="img" style="visibility:hidden" height="150px" width="500px">

</body>

图片上传即时显示javascript代码的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. ruby on rails爬坑（三）：图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  3. 图片上传并显示（兼容ie），图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  4. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  5. 自学php【一】 任务：图片上传即时可见

    工作已经快2周了,头儿给派了个任务做个企业站!这几天正在紧锣密鼓的作战中!等忙完了这个活!写下自己的学习心得体会!与看到文章的您一起分享! 在这里记录每次遇到的难题,如何解决的! 今天要做的功能就是实 ...

  6. 图片上传和显示——上传图片——上传文件）==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

  7. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

  8. ueditor图片上传和显示问题

    图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...

  9. django 图片上传与显示

    由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...

随机推荐

  1. PostgreSQL的 initdb 源代码分析之八

    继续分析 由于 我并未进行特殊的参数设置,所以 (strlen(default_text_search_config) == 0) 成立. 故 调用   default_text_search_con ...

  2. Visual Studio 调用 Delphi DLL 会退出的解决方案

    新写了一个 Delphi 的 dll 供 C# 程序调用,却发现在使用 Visual Studio 2012 进行调试时,程序会在调用后自动退出. 经过对比,只需要将工程属性中“调试”一页下的“启用 ...

  3. CN今日凌晨出现全部瘫痪的故障，持续近6个小时

    今日凌晨1点左右,所有cn后缀的网站出现无法访问的情况,原因来自于所有的cn域名均无法解析.据国内知名DNS解析商DNSLA称,故障源自CN所使用的根域名授权服务器瘫痪所致,故障一直持续到今天早上7点 ...

  4. UVALive 7070 The E-pang Palace 暴力

    The E-pang Palace Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/problem ...

  5. 进程和cpu的相关知识和简单调优方案

    进程就是一段执行的程序,每当一个程序执行时.对于操作系统本身来说,就创建了一个进程,而且分配了相应的资源.进程能够分为3个类别:     1.交互式进程(I/O)     2.批处理进程 (CPU) ...

  6. java 覆盖hashCode()深入探讨 代码演示样例

    java 翻盖hashCode()深入探讨 代码演示样例 package org.rui.collection2.hashcode; /** * 覆盖hashcode * 设计HashCode时最重要 ...

  7. perl详解

    http://www.blogjava.net/qileilove/archive/2013/09/04/403646.html

  8. Python学习 之 OS模块

    1.目录操作 import os os.mkdir('abc')   #创建abc文件 tree a  #查看目录结构 2.目录遍历 方式一:递归 import os def dirList(path ...

  9. O​r​a​c​l​e​1​1​g​ ​f​o​r​ ​R​e​d​H​a​t​6​.​4​安​装​手​册

    一. 检查 Oracle 11g 安装所依赖的软件包 检查包是否安装 # rpm -q 包名 包名: 1   ) binutils 2 ) compat-libstdc++   3) elfutils ...

  10. TensorFlow学习之运行label_image实例

    前段时间,搞了搞编译label_image中cc的实例,最后终于搞定...但想在IDE中编译还没成功,继续摸索中. 现分享一下,探究过程,欢迎叨扰,交流. 个人地址:http://home.cnblo ...