码迷,mamicode.com
首页 > 编程语言 > 详细

图片上传即时显示javascript代码

时间:2014-07-22 22:57:55      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   width   io   

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代码,布布扣,bubuko.com

图片上传即时显示javascript代码

标签:style   blog   java   color   width   io   

原文地址:http://www.cnblogs.com/fengqingyuweihan/p/3848685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!