这是基于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. 数据库MySQL常用命令复习

    -- 查看数据库 show databases; -- 创建数据库 create database '数据库名'; -- 删除数据库 drop database '数据库名'; -- 选库 use ' ...

  2. SqlServer刷新所有视图

    CREATE PROCEDURE RefreshAllView AS DECLARE MyCursor CURSOR FOR select Name from dbo.sysobjects where ...

  3. java源码部署

    环境:nginx+tomcat部署方式:源码部署源码目录 /chroot2/test/schedule 目录下面就是所有源码了tomcat 位置: /usr/local/tomcat/apache-t ...

  4. [原]生产环境下的nginx.conf配置文件(多虚拟主机)

    [原]生产环境下的nginx.conf配置文件(多虚拟主机) 2013-12-27阅读110 评论0 我的生产环境下的nginx.conf配置文件,做了虚拟主机设置的,大家可以根据需求更改,下载即可在 ...

  5. CopyU！v2 已经收录到腾讯软件管家！

    腾讯软件管家已经正式收录了CopyU!,这样大家又多了一个安全快速下载软件的好途径!腾讯渠道的CopyU!更新将会保持与官方同步,现有下载CopyU!软件的渠道中,官方保证同步的主要有: 1.非凡软件 ...

  6. Python标准库：迭代器Itertools

    Infinite Iterators: Iterator Arguments Results Example count() start, [step] start, start+step, star ...

  7. maven学习（二）

    为了兼容之前基于ant构建的项目发布包结构,在基于maven做构建的时候,需要自定义打包方式. maven的maven-assembly-plugin插件支持任意格式的打包,比如:dir,zip等形式 ...

  8. oracle_partition sample

    (1.) 表空间及分区表的概念 表空间: 是一个或多个数据文件的集合,所有的数据对象都存放在指定的表空间中,但主要存放的是表,所以称作表空间. 分区表: 当表中的数据量不断增大,查询数据的速度就会变慢 ...

  9. 小白日记42：kali渗透测试之Web渗透-SQL盲注

    SQL盲注 [SQL注入介绍] SQL盲注:不显示数据库内建的报错信息[内建的报错信息帮助开发人员发现和修复问题],但由于报错信息中提供了关于系统的大量有用信息.当程序员隐藏了数据库内建报错信息,替换 ...

  10. 《Entity Framework 6 Recipes》中文翻译——第十二章自定义EntityFramework对象（一）

    本章的方法探讨一些可以应用于对象和实体框架的流程定制.这些方法涵盖了许多“幕后”的东西,它可以使你的代码更统一,比如通过更关注应用程序核心业务规则执行的细节,应用范围更广泛.我们开始本章的一个方法,告 ...