js 实现本地图片预览

来源：互联网发布：java am pm转24小时制编辑：程序博客网时间：2024/05/03 08:16

下面是一种实现方法:

ie 用 filter 对象

其它浏览器则用 HTML5 中的 FileReader 对象

<html>
<head>
<meta charset="utf-8" />
</head>
<script>
         /**
           *  进行图片预览
           */
         function change() {
                   var pic = document.getElementById("preview"),         //显示图片的 img  元素
                            file = document.getElementById("f");            //选择图片的 file 元素

                   var ext = file.value.substring(file.value.lastIndexOf(".") + 1)
                                     .toLowerCase();                //取用户选择的文件后辍名
                   var allow = 'jpeg,jpg,gif,png'; //设置允许的图片的格式
                   // gif在IE浏览器暂时无法显示
                   if (allow.indexOf(ext)=-1) { //图片格式不正确就返回
                            alert("图片的格式必须为png或者jpg或者gif或者jpeg格式！");
                            return;
                   }
                   //判断浏览器是 IE
                   var isIE = navigator.userAgent.match(/MSIE/) != null, isIE6 = navigator.userAgent
                                     .match(/MSIE 6.0/) != null;

                   if (isIE) { // 是 IE
                            file.select();
                            //获取file域中的 文件路径
                            var reallocalpath = document.selection.createRange().text;

                            // IE6浏览器设置img的src为本地路径可以直接显示图片
                            if (isIE6) { // 是 ie 6
                                     pic.src = reallocalpath;
                            } else {
                                     // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                                     pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\""
                                                        + reallocalpath + "\")";
                                     // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                                     pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
                            }
                   } else {
                            html5Reader(file);
                   }
         }
         /**
           *  HTML 5   的方式读取
           */
         function html5Reader(file) {
                   var file = file.files[0];
                   //创建文件读取
                   var reader = new FileReader();
                   //这个方法能转换成实际要传的数据
                   reader.readAsDataURL(file);

                   reader.onload = function(e) {
                            var pic = document.getElementById("preview"); //展示图片的格式
                            pic.src = this.result; // result属性包含的是以data URL编码的file/blob数据
                   }
         }
</script>

<body>
         <form enctype="multipart/form-data" name="form1">
                   <input id="f" type="file" name="f" onchange="change()" />
                   <div class="upload">上传图片</div>
                   <p>预览:</p>
                   <p>
                            <img id="preview" alt="" name="pic" />
                   </p>
         </form>
</body>
</html>

还有另一种方法

获取window 对象的 URL 属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    /**
     * 从 file 域获取本地图片 url
     *   file 域 id
     * @return 返回所选文件的 id
     */
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
            url = document.getElementById(sourceId).value;
        } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
            url = window.URL
                    .createObjectURL(document.getElementById(sourceId).files
                            .item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
           url = window.URL
                    .createObjectURL(document.getElementById(sourceId).files
                            .item(0));
        }
        return url;
    }

    /**
     * 将本地图片显示到浏览器上
     * @param sourceId
     *            文件域的id
   * @param targetId
     *            用来显示图片的元素 id
     */
    function preImg(sourceId, targetId) {
        // 取所选文件的 url
        var url = getFileUrl(sourceId);
        var imgPre = document.getElementById(targetId);
        imgPre.src = url;
    }
</script>
</head>
<body>
    <form action="">
        <input type="file" name="imgOne" id="imgOne"
            onchange="preImg(this.id,'imgPre');" />
        <img id="imgPre" src="" width="300px"
            height="300px" style="display: block;" />
    </form>
</body>
</html>

0 0

js 实现 本地图片预览

js 实现本地图片预览