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

<html>

<head>

    <title></title>

</head>

<body>

    <div id="divPreview">

        <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"

            alt="" />

    </div>

    <input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />

    <script type="text/javascript">

        //js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

        function PreviewImage(fileObj, imgPreviewId, divPreviewId) {

            var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;

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

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

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

                if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等

                    if (window.FileReader) {

                        var reader = new FileReader();

                        reader.onload = function (e) {

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

                        }

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

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

                        alert("不支持Safari6.0以下浏览器的图片预览!");

                    }

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

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

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

                    } else {//ie[7-9]

                        fileObj.select();

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

                            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问

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

                        if (newPreview == null) {

                            newPreview = document.createElement("div");

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

                            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";

                            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";

                            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", fileObj.files[0].getAsDataURL());

                    } else {//firefox7.0+                    

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

                    }

                } else {

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

                }

            } else {

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

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

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

                    fileObj.select();

                    document.selection.clear();

                }

                fileObj.outerHTML = fileObj.outerHTML;

            }

            return fileObj.value;    //返回路径

        }

    </script>

</body>

</html>

通过file文件选择图片预览功能的更多相关文章

  1. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  2. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  3. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  7. html页面选择图片上传时实现图片预览功能

    实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...

  8. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

  9. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

随机推荐

  1. 一步一步实现基于Task的Promise库（二）all和any方法的设计和实现

    在上一篇中我们已经初步完成了Task类,如果仅仅是这些,那么没有多大意义,因为网上这类js库有很多,现在我们来些更复杂的使用场景. 如果我们现在有这样一个需求:我们要先读取aa.txt的内容,然后去后 ...

  2. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  3. visual c++ 动态链接库调用总结

    由于每次使用动态链接库的时候都要重新去查资料,查调用方式,有些烦躁,本人抽点时间在此做个总结,希望可以对需要的朋友有所帮助. 1,显式加载方式加载动态链接库 简单易懂,随掉随用 (1)         ...

  4. DNN简介以及安装

    开源框架DNN简介以及安装 donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dn ...

  5. Parameter Binding in ASP.NET Web API(参数绑定)

    Parameter Binding in ASP.NET Web API(参数绑定) 导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnbl ...

  6. Xcode开发和调试总结

    Xcode是iOS开发主要的工具.IDE.关于Xcode的细枝末节,可以参考苹果的官方文档或者众多的说明.此文档主要涉及常用开发和调试注意事项,参考版本为Xcode 5.1.1. 目标设置: 在此,我 ...

  7. php面试题中的约瑟夫环

    最近忙着做面试题,看到一道题感觉比较有兴趣,查阅相关资料后发现这是一个约瑟夫环的问题. 一群猴子围成一圈,按1,2,3,4,....n一次编号.然后从第1值开始数,数到第m只,把它踢出圈,从它后面再开 ...

  8. springMVC3学习(四)--访问静态文件如js,jpg,css

    如果你的DispatcherServlet拦截的是*.do这样的URL,就不存在访问不到静态资源的问题 如果你的DispatcherServlet拦截了"/"所有的请求,那同时对* ...

  9. JavaScript –type

    JavaScript –类型之我晕 每次写博我觉得取上恬当的题目比整篇行文都难,词量有限的情况下突然想到JavaScript拾遗应该会是一个非常文艺而夺目的博文题目,但我并没有急着使用,经验告诉我应该 ...

  10. 需要我们了解的SQL Server阻塞原因与解决方法

    需要我们了解的SQL Server阻塞原因与解决方法 上篇说SQL Server应用模式之OLTP系统性能分析.五种角度分析sql性能问题.本章依然是SQL性能 五种角度其一“阻塞与死锁” 这里通过连 ...