javascript 图片上传缩略图预览 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片上传缩略图预览</title>
<script language="JavaScript" type="text/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) {
        try {
            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) {
                    var browser = navigator.appName;
                    var b_version = navigator.appVersion
                    var version = b_version.split(";");
                    var trim_Version = version[1].replace(/[ ]/g, "");

                    if (trim_Version == "MSIE6.0") {
                        file.select();
                        //path = document.selection.createRange().text;
                        path = window.URL.createObjectURL(file.files[0]);
                    } else if (trim_Version == "MSIE7.0") {
                        file.select();
                        //path = document.selection.createRange().text;
                        path = window.URL.createObjectURL(file.files[0]);
                    } else if (trim_Version == "MSIE8.0") {
                        file.select();
                        //path = document.selection.createRange().text;
                        path = window.URL.createObjectURL(file.files[0]);
                    } else {
                        file.select();
                        //file.blur();
                        //path = document.selection.createRange().text;
                        path = window.URL.createObjectURL(file.files[0]);
                    }
                }
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (file.files) {
                        path = file.files.item(0).getAsDataURL();
                    } 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;
                }
            }
        }
        catch (e) {
            alert("R:"+e);
        }

        /***
        *读取，图片为流文件
        ***/
        /*
        var reader = new FileReader();
         reader.onload = function(e) 
         {
               console.log(e.target.result);
               alert(e.target.result);
               var fromData = new FormData();
               fromData.append("base64", e.target.result);
         }
         reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);
         */
    }
</script>
</head>
<body>
<div class='previewDemo'>
      <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));" />
    <br />
      <img id="img" style="visibility:hidden" height="100px" width="100px" />
    
</div>
</body>
</html>

 

posted @ 2013-09-03 18:09  如.若  阅读(521)  评论(0)    收藏  举报