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

个人理解：给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. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  2. Golang语法与代码格式速记【转】

    // Description: Golang语法与代码格式速记 // Author: cxy // Date: 2013-04-01 // Version: 0.3 // TODO 说明 // TOD ...

  3. iOS程序破解——ARM汇编基础

    原文在此:http://www.cnblogs.com/mddblog/p/4951650.html 一.Thumb指令与ARM指令 Thumb指令为16位,因此存储代码的密度高,节省存储空间.但是功 ...

  4. 深入剖析通知中心和KVO

    深入剖析通知中心和KVO 要先了解KVO和通知中心,就得先说说观察者模式,那么观察者模式到底是什么呢?下面来详细介绍什么是观察者模式. 观察者模式 -A对B的变化感兴趣,就注册成为B的观察者,当B发生 ...

  5. MRC下多个对象的内存管理

    //set方法传递进来对象的生命周期,要求是在当前对象销毁之前,它一直存在就好- (void)setCar:(Car *)car{ //1.判断set方法传递进来的值是否与成员变量中保存的是同一个对象 ...

  6. Java异常之自定义异常

    哎呀,妈呀,又出异常了!俗话说:"代码虐我千百遍,我待代码如初恋". 小Alan最近一直在忙着工作,已经很久没有写写东西来加深自己的理解了,今天来跟大家聊聊Java异常.Java异 ...

  7. python爬虫—爬取百度百科数据

    爬虫框架:开发平台 centos6.7 根据慕课网爬虫教程编写代码 片区百度百科url,标题,内容 分为4个模块:html_downloader.py 下载器 html_outputer.py 爬取数 ...

  8. 全新的membership框架Asp.net Identity(1)——.Net membership的历史

    在Asp.net上,微软的membershop框架经历了Asp.net membership到Asp.net simple membership,再到现在的Asp.net Identity. 每一次改 ...

  9. Scrum vs. PMP vs. PRINCE2的发展趋势图

    这时2013年来自Google Trends的两幅图,数据来自对“Jobs and Education”的统计,体现了这三种认证,或者视为三种项目实施方式的趋势. 下图是全球的趋势: 下图是美国的趋势 ...

  10. javascript-代理模式

    JavaScript代理模式笔记 由于一个对象不能直接引用另一个对象,所以要用过代理对象在这两个对象之间起到中介作用 1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSON ...