<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. uva 10721 - Bar Codes(dp)

    题目链接:uva 10721 - Bar Codes 题目大意:给出n,k和m,用k个1~m的数组成n,问有几种组成方法. 解题思路:简单dp,cnt[i][j]表示用i个数组成j, cnt[i][j ...

  2. No configuration found for the specified action解决办法(转)

    使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:form>标记时,发现控制台总是输出警告信息, 警告信息内容如下: 警告: No configuration fou ...

  3. listView.getChildAt(i)时java.lang.NullPointerException

    BaseAdapter返回的是当前屏幕所能显示Item条数的组件,所以通过listView.getChildAt(i); 返回的是当前屏幕所能显示的组件.不能通过listView.getChildAt ...

  4. Java多线程系列目录（转）

    转载方便自己学习,转自:Java多线程系列目录(共43篇) http://www.cnblogs.com/skywang12345/p/java_threads_category.html 最近,在研 ...

  5. java中的Checked Exception和Unchecked Exception的区别

    Java 定义了两种异常: - Checked exception: 继承自 Exception 类是 checked exception.代码需要处理 API 抛出的 checked excepti ...

  6. 突破单机多实例Elasticsearch

    默认大家都是单机单实例es,在实验环境下想尽可能模拟各种场景.单机多实例就出来了... 实验拓扑图 01.es安装这里就不说了 详情:http://www.cnblogs.com/xiaochina/ ...

  7. MYSQL在Win下免安装zip

    mysql对于Win测试简单zip安装即可了解my.in配置文件的妙处(show variables),本地搭建mysql服务测试引擎! 01.下载 https://dev.mysql.com/dow ...

  8. 【微信小程序】用户首次进入小程序拒绝授权，如何再次调用授权页面，获取用户信息userInfo

    前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户 ...

  9. jquerymobile 的特有 事件 和 方法 (转)

    1.触摸屏事件—— Touch events tap Triggers after a quick, complete touch event. 本人实际测试效果:轻轻点击,效果和按普通按钮差不多. ...

  10. Hadoop分布式文件系统使用指南

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_user_guide.html 目的 概述 先决条件 Web接口 Shell命令 DFSAdmin命 ...