这是基于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. const修饰的双重指针赋值解惑

    在c程序中,我们可能经常会使用到指针之间的赋值. 传统的赋值操作: char *cp = "c"; const char *ccp; ccp = cp; printf(" ...

  2. Eclipse10大快捷键组合

    一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. Ctrl+Shift+C 快速单行注释 也适用于 ...

  3. 简单的玩玩etimer <contiki学习笔记之九 补充>

    这幅图片是对前面  <<contiki学习笔记之九>>  的一个补充说明. 简单的玩玩etimer <contiki学习笔记之九> 或许,自己正在掀开contiki ...

  4. java连接数据库的解决方法大全（mysql）

    解决方法一:(最重要的一种方法) 你看下my.ini,有无  [mysql] default-character-set=utf8 [client]  default-character-set=ut ...

  5. C++ struct与class

    1.相对于C中struct,C++做了很大的扩充.基本上和class 差不多.只有一些细节上的差别. 2.对于成员的默认访问权限,class是private,struct是public.需要注意的是, ...

  6. cdoj 574 High-level ancients dfs序+线段树

    High-level ancients Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/s ...

  7. POJ 3522 Slim Span 最小差值生成树

    Slim Span Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3522 Description Gi ...

  8. 通过缓存数据库结果提高PHP性能(转)

    众所周知,缓存数据库查询的结果可以显著缩短脚本执行时间,并最大限度地减少数据库服务器上的负载.如果要处理的数据基本上是静态的,则该技术将非常有效.这是因为对远程数据库的许多数据请求最终可以从本地缓存得 ...

  9. Tomcat以指定JDK运行

    如果一台机器上有多个Tomcat,可能存在不同的Tomcat需要不同版本JDK才能运行的情况,这时候就需要指定JDK来同时运行多个Tomcat了. 在windows环境下以批处理文件方式启动tomca ...

  10. 文本编辑器Nano实用快捷键

    一.复制.剪切和粘贴文本 1.行复制.剪切和粘贴 Alt+6:复制光标所在行. Ctrl+K:剪切光标所在行. Ctrl+U:粘贴. 2.自由复制.剪切和粘贴 自由复制: Ctrl+6:设置复制文本的 ...