图片上传即时显示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>
posted @ 2014-07-16 14:47  风轻雨微寒  阅读(329)  评论(0)  编辑  收藏  举报