这是基于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. CF:322D - Ciel and Duel 贪心 或者 DP 我用的贪心 。。难道sort跟qsort是不一样的么？

    D. Ciel and Duel time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. 使用Unity制作游戏关卡的教程（一）

    转自: http://gamerboom.com/archives/74131 作者:Matthias Zarzecki 我正在制作<Looking For Group – The Fork O ...

  3. IE自动化

    自动打开www.baidu.com,并搜索关键字“abcd” #定义函数:等待页面打开 function WaitForLoad($ie) { sleep 2 do {Sleep -Mi 200} w ...

  4. Eclipse下如何导入jar包【转载】

    我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们就需要在相应的工程下面导入这个jar包.以下配图说明导入jar包的步骤. 1.右击工程的根目录,点击Properties进 ...

  5. 彩票APP将演绎“快鱼吃慢鱼”的发展轨迹

    思科CEO钱伯斯有句名言,叫"快鱼吃慢鱼",他觉得"在Internet经济下,大公司不一定打败小公司,可是快的一定会打败慢的."对此观点,笔者表示部分认同,首先 ...

  6. 利用nf_conntrack机制存储路由，省去每包路由查找

    IP是无连接的,因此IP路由是每包一路由的,数据包通过查找路由表获取路由,这是现代操作协议协议栈IP路由的默认处理方式.可是假设协议栈具有流识别能力,是不是能够基于流来路由呢?答案无疑是肯定的. 设计 ...

  7. PAT 1003

    1003. Emergency (25) As an emergency rescue team leader of a city, you are given a special map of yo ...

  8. SMI接口，SMI帧结构，MDC/MDIO

    转载:http://blog.csdn.net/zyboy2000/article/details/7442464 SMI全称是串行管理接口(Serial Management Interface). ...

  9. Invalidate、RedrawWindow与UpdateWindow

    Invalidate.RedrawWindow与UpdateWindow的区别 Invalidate()是强制系统进行重画,但是不一定就马上进行重画.因为Invalidate()只是通知系统,此 时的 ...

  10. W3C XML Schema 教程

    转自:http://www.blogjava.net/sham2k/articles/179825.html W3C XML Schema 教程 XML SCHEMA教程 本教程是笔者学习W3C的&l ...