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

个人理解：给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. webpack初体验

    本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是 ...

  2. C# Stream 和 byte[] 之间的转换

    一. 二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream( ...

  3. SharePoint 2013 CSOM creat post in NewsFeed Access Denied

    现象 在用CSOM创建新闻源时候,报错:无访问权限 解决办法 value="true" 改为 value="false" <appSettings> ...

  4. AndRodi Strudio中的按钮时件

    AndRodi Studio中的按钮时件注册一定要写在onCraete中 @Override protected void onCreate(Bundle savedInstanceState) { ...

  5. Runtime相关整理

    一．Runtime是用C和汇编写的 对于C语言,函数的调用在编译的时候会决定调用哪个函数.对于OC的函数,属于动态调用过程,在编译的时候并不能决定真正调用哪个函数,只有在真正运行的时候才会根据函数的名 ...

  6. Core Data的一些常见用法

    一.简介 Core Data是一个纯粹的面向对象框架,其本质就是一个ORM(对象关系映射:Object Relational Mapping),能以面向对象的方式操作SQLite数据库.在实际开发中绝 ...

  7. 页面以base64输出图片

    <% //读取文件路径,输出base64 编码 System.IO.FileStream stream = System.IO.File.OpenRead(ViewBag.FilePath); ...

  8. Linux平台卸载MySQL总结

    如何在Linux下卸载MySQL数据库呢? 下面总结.整理了一下Linux平台下卸载MySQL的方法. MySQL的安装主要有三种方式:二进制包安装(Using Generic Binaries).R ...

  9. Linux时间同步介绍

    在Linux系统中,为了避免主机时间因为在长时间运行下所导致的时间偏差,进行时间同步(synchronize)的工作是非常必要的.Linux系统下,一般使用ntp服务来同步不同机器的时间.NTP 是网 ...

  10. YourSQLDba开源项目发布到codeplex网站了

    今天登录YourSQLDba的官方网站http://yoursqldba.grics.ca/index_en.shtml,发现YourSQLDba项目已经发布到开源网站http://www.codep ...