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

个人理解：给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. JavaScript基本语法（四）

    一.     JavaScript 函数 1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.我们可以将一些常用的代码封装成函数,待用到的时候就能直接调用使用.利用函数可以使代码的组织结构 ...

  2. arcgis server10.2.2发布地图基础服务的具体步骤

    1.直接打开制作好的.mxd文档,比如这里: 2.打开mxd文档之后,打开菜单:file-share as -services 弹出地图发布服务的界面: 点击publish之后,耐心的等待一段时间,地 ...

  3. 最大似然判别法和Bayes公式判别法

    最大似然判别法 Bayes公式判别法

  4. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q109-Q111)

    Question  109  Your company uses a third-party service to host its SharePoint 2010 site. The hosting ...

  5. hotCity 小程序城市选择器， 城市数据库可自己导出

    hotCity 城市选择器, 城市数据库可自己导出 后台数据API 由HotApp小程序统计提供并维护,如果需要导出并部署在公司的生产环境,最后有SQL导出下载地址 开源地址 https://gith ...

  6. html5快速入门（一）—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  7. pygame开发PC端微信打飞机游戏

    pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...

  8. css sprite简便方法切 《评分五角星》

    摘抄自我趣同伴的心得: 大家可以会遇到过要做满意度用星级来评分的情况,类似这种 实现的方法有很多,大家最初想到的可能是根据满意度有多少种情况就切多少种图,然后拼在一张图里面,通过控制图片的位置来实现. ...

  9. 解决方法：未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    在Windows Server 2008 x64 上部署一个Vs 2008开发的.net2.0 的asp.net web 程序,调用了office的组件来导入导出excel文件,其中托管管道模式为集成 ...

  10. 机器学习实战笔记(Python实现)-00-readme

    近期学习机器学习,找到一本不错的教材<机器学习实战>.特此做这份学习笔记,以供日后翻阅. 机器学习算法分为有监督学习和无监督学习.这本书前两部分介绍的是有监督学习,第三部分介绍的是无监督学 ...