1.效果如下，可测试

2.代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

    //本地图片预览

            function setImagePreview(fieldupload, image, imagediv) {

                var docObj = document.getElementById(fieldupload);

                var imgObjPreview = document.getElementById(image);

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

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

                    imgObjPreview.style.display = 'block';

                    imgObjPreview.style.width = '150px';

                    imgObjPreview.style.height = '150px';

                    //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(imagediv);

                    //必须设置初始大小

                    localImagId.style.width = "150px";

                    localImagId.style.height = "150px";

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

                    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;

            }

</script>

</head>

<body>

<div id="localImag"> <img id="preview" width="150px" height="150px"  src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif" alt="" /></div>

<div>

  <input type="file" onchange="javascript:setImagePreview('upload','preview','localImag');" id="upload" />

</div>

</body>

</html>

【Javascript Demo】无刷新预览所选择的图片的更多相关文章

  1. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  2. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  3. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  6. JavaScript 实现打印,打印预览,打印设置

    WebBrowser是IE内置的浏览器控件,无需用户下载. 一.WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CL ...

  7. JavaScript实现无刷新评论及在IE下的剪切板访问（学习）

    1.无刷新评论 tips: appendChild:将新元素作为父元素的最后一个子元素进行添加. insertBefore:在一个指定的子节点之前插入一个节点 实现: <!DOCTYPE htm ...

  8. 如何使用JavaScript直接上传并预览粘贴板的图片？

    (题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...

  9. JavaScript实现拖拽预览，AJAX小文件上传

    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...

随机推荐

  1. HDU 3949 XOR 线性基

    http://acm.hdu.edu.cn/showproblem.php?pid=3949 求异或第k小,结论是第k小就是 k二进制的第i位为1就把i位的线性基异或上去. 但是这道题和上一道线性基不 ...

  2. Needed Learning(Updating)

    决定把掌握不熟练或是模型见的少的知识点在这里列一列 希望能在自己AFO前成功get技能点吧…… 优先级:动态规划-分治-字符串-图论-数据结构-数学-计算几何-其它 动态规划 1.四边形不等式优化 2 ...

  3. Linux性能监控分析命令（四）—top命令介绍

    性能监控分析的命令包括如下: 1.vmstat 2.sar 3.iostat 4.top 5.free 6.uptime 7.netstat 8.ps 9.strace 10.lsof ======= ...

  4. centos7安装kafka_2.11-1.0.0 新手入门

    系统环境 1.操作系统:64位CentOS Linux release 7.2.1511 (Core) 2.jdk版本:1.8.0_121 3.zookeeper版本:zookeeper-3.4.9. ...

  5. Git_集中式vs分布式

    创建版本库 时光机穿梭 版本回退 工作区和暂存区 管理修改 撤销修改 删除文件 远程仓库 添加远程库 从远程库克隆 分支管理 创建与合并分支 解决冲突 分支管理策略 Bug分支 Feature分支 多 ...

  6. PID DC/DC Converter Controller Using a PICmicro Microcontroller

    http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=1824&appnote=en011794 ...

  7. Linux下的两个经典宏定义 转

    http://www.linuxidc.com/Linux/2016-08/134481.htm http://www.linuxidc.com/Linux/2013-01/78003.htm htt ...

  8. 05引用类型以及特殊引用类型string

    基本 □ 哪些属于引用类型 类(object,string),接口.数组.委托 □ 引用类型分配在哪里 ● 引用类型变量位于线程栈. ● 引用类型实例分配在托管堆上. ● 当引用类型实例的大小小于85 ...

  9. java多线程实现主线程等待子线程执行完问题

    本文介绍两种主线程等待子线程的实现方式,以5个子线程来说明: 1.使用Thread的join()方法,join()方法会阻塞主线程继续向下执行. 2.使用Java.util.concurrent中的C ...

  10. tomcat配置301重定向

    tomcat默认情况下不带www的域名是不会跳转到带www的域名的,而且也无法像apache那样通过配置.htaccess来实现.如果想要把不带“www'的域名重定向到带”www"域名下,又 ...