zoukankan      html  css  js  c++  java
  • 图片上传即时显示javascript代码

    这是基于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>
  • 相关阅读:
    TP5.0防跳墙访问
    TP5.0上传添加数据库
    抽象类与接口
    instanceof 关键字
    abstract 抽象类
    extends 继承
    单例模式
    类的加载过程和对象的创建
    静态成员变量和非静态成员变量的区别
    this关键字
  • 原文地址:https://www.cnblogs.com/fengqingyuweihan/p/3848685.html
Copyright © 2011-2022 走看看