HTML 代码如下 

<body>

        <table width="100%" border="0" cellspacing="0" cellpadding="0">

            <tbody>

                <tr>

                    <td height="101" align="center">

                        <div id="localImag" style="border: 1px solid red;">

                             <img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" />

                        </div>

                    </td>

                </tr>

                <tr>

                    <td align="center" style="padding-top:10px;">

                    <form method="get" action="xznetwork" name="textfile">

                       <input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreview();">

                    </form>

                    </td>

                </tr>

            </tbody>

        </table>

    </body>
JavaScript 代码如下

//下面用于图片上传预览功能

function setImagePreview(avalue) {

    //input

    var docObj = document.getElementById("doc");

    //img

    var imgObjPreview = document.getElementById("preview");

    //div

    var divs = document.getElementById("localImag");

        if (docObj.files && docObj.files[0]) {

            //火狐下，直接设img属性

            imgObjPreview.style.display = 'block';

            imgObjPreview.style.width = '100px';

            imgObjPreview.style.height = '100px';

            //imgObjPreview.src = docObj.files[0].getAsDataURL();

            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

        } else {

            //IE下，使用滤镜

            docObj.select();

            var imgSrc = document.selection.createRange().text;

            var localImagId = document.getElementById("localImag");

            //必须设置初始大小

            localImagId.style.width = "100px";

            localImagId.style.height = "100px";

            //图片异常的捕捉，防止用户修改后缀来伪造图片

            try {

                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

            } catch(e) {

                alert("您上传的图片格式不正确，请重新选择!");

                return false;

            }

            imgObjPreview.style.display = 'none';

            document.selection.empty();

        }

    return true;

}

JS上传图片本地实时预览缩略图的更多相关文章

  1. RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）

    RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...

  2. JS 上传图片时实现预览

    网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...

  3. 原生js上传图片时的预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. js 实现图片实时预览

    <body> 上传图片: <input type="file" name="file" style="width: 200px; h ...

  5. js实现图片实时预览

    注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html  转载请注明出处 <body> 上传图片: <input type= ...

  6. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  7. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  8. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  9. （JavaScript）实现上传图片实时预览和（文件）大小判断

    唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...

随机推荐

  1. VS2010(2012)中使用Unit Testing进行单元测试

    原文 VS2010(2012)中使用Unit Testing进行单元测试 使用VS 2012自带的Unit Testing工具进行单元测试是非常方便的.网上关于这方面的例子很多,这篇随笔只起个人学习笔 ...

  2. Windows server 2008 R2实现多用户远程连接

    原文 Windows server 2008 R2实现多用户远程连接 经常使用远程桌面的朋友可能会注意到,Windows server 2008 R2中,远程桌面最多只允许两个人远程连接,第三个人就无 ...

  3. Mysql 执行计划分析

    zjdev 正常访问: mysql> explain SELECT temp.* , -> (SELECT COUNT(sn) FROM AssignClientManager WHERE ...

  4. POJ 1330 Nearest Common Ancestors(Tarjan离线LCA)

    Description A rooted tree is a well-known data structure in computer science and engineering. An exa ...

  5. uploadify，实际开发案例【选择完文件点击上传才上传】

    <script type="text/javascript"> )+Math.floor(Math.random()*)+']-'; //设置随机文件前缀. $k(fu ...

  6. [Android学习笔记]自定义控件的使用

    自定义控件时,最好抽象得彻底,并且编写需严谨,因为可能程序中多处都会引用到它,或者提供给团队中的其他人使用. 其一般步骤为: 1.创建控件的类文件,定义其功能逻辑.一般继承自现有控件或者View2.在 ...

  7. poj 2513 连接火柴 字典树+欧拉通路 好题

    Colored Sticks Time Limit: 5000MS   Memory Limit: 128000K Total Submissions: 27134   Accepted: 7186 ...

  8. The tempfile module

    The tempfile module The tempfile module This module allows you to quickly come up with unique names ...

  9. PHP开发学习门户改版效果图投票

    亲们,PHP开发学习门户上线两个月啦,站长想进行一次改版.希望大家在留下宝贵的一票.选出喜欢的样式吧 A样式: B样式: mod=misc&action=votepoll&fid=46 ...

  10. jsoncpp使用

    第一个github网站下载jsoncpp最新的版本库:https://github.com/open-source-parsers/jsoncpp 点击右下角的Download ZIP进行下载 解压后 ...