<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 = ,

            widht = ,

            ext = '',

            size = ,

            name = '',

            path = '';

            var self = this;

            if (file)

            {

                name = file.value;

                if (window.navigator.userAgent.indexOf("MSIE") >= ) {

                    var browser = navigator.appName;

                    var b_version = navigator.appVersion

                    var version = b_version.split(";");

                    var trim_Version = version[].replace(/[ ]/g, "");

                    if (trim_Version == "MSIE6.0") {

                        file.select();

                        //path = document.selection.createRange().text;

                        path = window.URL.createObjectURL(file.files[]);

                    } else if (trim_Version == "MSIE7.0") {

                        file.select();

                        //path = document.selection.createRange().text;

                        path = window.URL.createObjectURL(file.files[]);

                    } else if (trim_Version == "MSIE8.0") {

                        file.select();

                        //path = document.selection.createRange().text;

                        path = window.URL.createObjectURL(file.files[]);

                    } else {

                        file.select();

                        //file.blur();

                        //path = document.selection.createRange().text;

                        path = window.URL.createObjectURL(file.files[]);

                    }

                }

                else if (window.navigator.userAgent.indexOf("Firefox") >= ) {

                    if (file.files) {

                        path = file.files.item().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) !== -) {

                    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>

javascript 图片上传缩略图预览的更多相关文章

  1. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  2. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  3. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  4. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  5. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  6. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. Android中保存静态秘钥实践（转）

    本文我们将讲解一个Android产品研发中可能会碰到的一个问题:如何在App中保存静态秘钥以及保证其安全性.许多的移动app需要在app端保存一些静态字符串常量,其可能是静态秘钥.第三方appId等. ...

  2. spring mvc自定义数据转换

    @InitBinder   在controller中注册一个customer protperty editor以解析request中的参数并通过date bind机制与handler method中的 ...

  3. java 实现文本格式转换

    代码如下,不太规范,仅作学习用 import java.io.*; public class CharSetTest { public static void main(String[] args) ...

  4. Java 获取盘符及分类

    import java.io.File; import javax.swing.filechooser.FileSystemView; public class ByteTest { public s ...

  5. （二）Linux Shell编程——运算符、注释

    2.7 Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符.原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...

  6. MySQL-关于事务的使用

    如果你一次执行单条查询语句, 则没有必要启用事务支持, 数据库默认支持SQL执行期间的读一致性, 如果你一次执行多条查询语句, 例如统计查询, 报表查询, 在这种场景下, 多条查询SQL必须保证整体的 ...

  7. Linux目录结构及解释（附图）

    ___/bin (binary二进制) 常用Linux命令 ___/boot 存放着启动Linux时使用的一些核心文件,包括一些链接文件以及镜像文件 ___/cdrom 这个目录在你刚刚安装系统的时候 ...

  8. 戴尔大力宣传Ubuntu 对比与Windows的差异

    2010-06-18 10:58:36   11175 人阅读   作者:萧萧 编辑:萧萧[爆料]  评论(46)   戴尔近日上线了一个新的网页,对比Linux开源系统(主要是Ubuntu)与Win ...

  9. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...

  10. UltraEdit加入到右键菜单中

    http://www.cppblog.com/prayer/archive/2009/02/20/74429.htmlUltraEdit安装好之后,拷贝到其它机器就可以直接使用而无需注册,但少了一个功 ...