上传文件实时显示【一张图片】：

个人理解：给img的src传值：这个值就是input[type='file']的value；

不过你要判断浏览器类型【很多】：IE6.0，IE7/8/9，Fixfox7.0以下，Firefox7.0+ ，Chrome。。。。。

直接贴代码【网上找的，记不得是哪位大神写的了】

function PreviewImage(obj, imgPreviewId, divPreviewId) {

            var allowExtention = ".jpg,.bmp,.gif,.png"; //,允许上传文件的后缀名

            var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();

            var browserVersion = window.navigator.userAgent.toUpperCase();

            if (allowExtention.indexOf(extention) > -1) {

                if (browserVersion.indexOf("MSIE") > -1) {

                    if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6

                        document.getElementById(imgPreviewId).setAttribute("src", obj.value);

                    } else {//ie[7-8]、ie9

                        obj.select();

                        var newPreview = document.getElementById(divPreviewId + "New");

                        if (newPreview == null) {

                            newPreview = document.createElement("div");

                            newPreview.setAttribute("id", divPreviewId + "New");

                            newPreview.style.width = 160;

                            newPreview.style.height = 170;

                            newPreview.style.border = "solid 1px #d2e2e2";

                        }

                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";

                        var tempDivPreview = document.getElementById(divPreviewId);

                        tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);

                        tempDivPreview.style.display = "none";

                    }

                } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox

                    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);

                    if (firefoxVersion < 7) {//firefox7以下版本

                        document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());

                    } else {//firefox7.0+

                        document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));

                    }

                } else if (obj.files) {

                    //兼容chrome、火狐等，HTML5获取路径

                    if (typeof FileReader !== "undefined") {

                        var reader = new FileReader();

                        reader.onload = function (e) {

                            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);

                        }

                        reader.readAsDataURL(obj.files[0]);

                    } else if (browserVersion.indexOf("SAFARI") > -1) {

                        alert("暂时不支持Safari浏览器!");

                    }

                } else {

                    document.getElementById(divPreviewId).setAttribute("src", obj.value);

                }

            } else {

                alert("仅支持" + allowExtention + "为后缀名的文件!");

                obj.value = ""; //清空选中文件

                if (browserVersion.indexOf("MSIE") > -1) {

                    obj.select();

                    document.selection.clear();

                }

                obj.outerHTML = obj.outerHTML;

            }

        }

Html调用

<body>

    <form name="form5" id="form5">

        <img id="imgView" src="" alt="" height="170" style="border:1px solid red" /><br>

        <input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')" />

        <div id="divNewPreview"></div>

    </form>

</body>

【JavaScript】图片上传预览的更多相关文章

  1. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  2. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  5. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  8. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  10. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

随机推荐

  1. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十）态势标绘模块

    config.xml文件的配置如下: <widget label="态势标绘" icon="assets/images/impact_area_over.png&q ...

  2. Android中的AlertDialog使用示例一（警告对话框）

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...

  3. Xcode 创建.a和framework静态库(转载)

    库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的静态库有 .a 和 .framework两种形式:动态库有.dylib 和 .framew ...

  4. js中的运算总结（未完待续

    [74由几个1几个5几个10几个20组成] var num = 74; for(one = 0; one <= num; one++){ for(five = 0; five <= num ...

  5. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  6. ORA-02292: integrity constraint (xxxx) violated - child record found

    在更新表的主键字段或DELETE数据时,如果遇到ORA-02292: integrity constraint (xxxx) violated - child record found 这个是因为主外 ...

  7. SQL Server 2008 R2——查找最小nIndex,nIndex存在而nIndex+1不存在 求最小连续数组中的最大值

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  8. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理3

    首先在webconfig中加入下面这句代码,这个主要是用来生成数据库的连接字符串 <connectionStrings> <add name="AuthorDesignCo ...

  9. 去掉windows8.1鸡肋的开始按钮

    无开始按钮了,win8.1的 开始按钮反而非常鸡肋.. 可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/89728 ...

  10. Mysql 主从热备份

    工作原理 首先锁定并备份主服务器数据库,从服务器导入备份的数据库,实现两个数据库的初态一样.然后把主服务器上执行过的sql语句都记录到二进制日志 Binarylog 中,从服务器会来读取这个log, ...