这是基于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. nginx将http重定向到https

    1.rewrite server { listen 80; server_name test.com; rewrite ^(.*)$ https://$host$1 permanent; } 2. n ...

  2. 汇编语言（学习笔记----寄存器CPU互作原理）

    一.段寄存器 1.段寄存器就是提供段地址的,8086CPU有4个段寄存器:CS(代码段寄存器),DS(数据段寄存器),SS(堆栈段寄存器),ES(附加段寄存器) 2.当8086CPU要访问内存时,由这 ...

  3. Android自己定义DataTimePicker（日期选择器）

    Android自己定义DataTimePicker(日期选择器)  笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...

  4. C++11 新特性之 Lambda表达式

    lambda表达式能够用于创建并定义匿名的函数对象,以简化编程工作 Lambda的语法例如以下: [函数对象參数](操作符重载函数參数)->返回值类型{函数体} []内的參数指的是Lambda表 ...

  5. starling 笔记

    ------------------------------------------------------------------ 这里的舞台是flash原生舞台,不是starling舞台 // r ...

  6. 【Unity3D插件】NGUI屏幕自适应（转）

    屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...

  7. vim中光标的前进和后退

    流行的文本编辑器通常都有前进和后退功能,可以在文件中曾经浏览过的位置之间来回移动.在 vim 中使用 Ctrl-O 执行后退,使用 Ctrl-I 执行前进.相关帮助: :help CTRL-O  :h ...

  8. 小白日记30：kali渗透测试之Web渗透-扫描工具-Skipfish

    WEB渗透-skipfish Skipfish是一个命令行模式,以C语言编写的积极的Web应用程序的安全性侦察工具,没有代理模式. 它准备了一个互动为目标的网站的站点地图进行一个递归爬网和基于字典的探 ...

  9. JQuery EasyUI 之 DataGrid

    1.动态创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: (1)页面上添加div标签 <div id=&qu ...

  10. DOM+Javascript一些实例

    1.内容+遮罩层+悬浮对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...