首页 > 代码库 > 图片上传即时显示javascript代码

图片上传即时显示javascript代码

2024-07-12 08:05:49   215人阅读

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>


联系
我们