阿里云优惠卷,升级续费，购买新产品点此领取

图片上传本地显示，多浏览器兼容

     经常遇到表单上传图片，使用原生 HTML 的 input file，通常都是把图片上传到服务器，返回图片地址，重新设置图片的src 。

其实不上传服务器也可以把图片显示出来的，这样可以减少对服务器的请求，并减少服务器端的垃圾图片。

      具体做法，现在通过Html5 的 FileReader 接口就可以轻松实现，提到Html5 大家会问： “那个恶心的IE怎么做呢？” 其实IE可以通滤镜来实现的

IE6直接设置src 为图片地址就可以显示的。废话不多说了直接上代码。

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <style type="text/css">
        img {width: 400px;height: 300px;}
        form {position: absolute;top: -2000px;}
        label {background-color: blue;padding: 6px 12px;color: #fff;}
    </style>
</head>
<body>
    <form method="POST" style="">
        <input type="file" id="file" />
    </form>
    <img id="image" alt=""/>
    <br/>
    <br/>
    <!-- 在这里用了lable控件，原始的file控件实在是太丑了 -->
    <!-- 在IE 里如果用 click 模拟点击 file控件 提交表单时会报 无法访问的错误，所以在这里用了 for="file" 来避免 -->
    <label for="file">提交</label>
    <script>
        $(function () {
            $("#file").change(function () {
                selectImg(this, "image", function () {
                    alert("处理完成");
                });
            });

            function selectImg(file, imgId, readyCallback) {
                ///<summary>图片选择</summary>
                ///<param name="file" type="Object">input file 控件</param> 
                ///<param name="imgId" type="string">img 控件id</param> 
                ///<param name="readyCallback">处理成功后回调方法</param> 

                var isIe = navigator.userAgent.match(/MSIE/) != null;
                var pic = document.getElementById(imgId);

                if (isIe) {
                    var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
                    // gif在IE浏览器暂时无法显示
                    if (ext !== "png" && ext !== "jpg" && ext !== "jpeg") {
                        window.util.messager("警告", "图片的格式必须为png或者jpg或者jpeg格式!");
                        return;
                    }

                    file.select();
                    var path = document.selection.createRange().text;
                    var picWidth = pic.width;
                    if (picWidth > 0) {
                        pic.style.width = picWidth;
                        pic.style.height = pic.height;
                    }

                    var isIe6 = navigator.userAgent.match(/MSIE 6.0/) != null;
                    // IE6浏览器设置为本地路径 
                    if (isIe6) {
                        pic.src = path;
                    } else {
                        // 非IE6版本可以通过滤镜来实现,sizingMethod 为 image 时显示原始图片，scale 自适应容器大小,可以根据需求设置
                        pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";
                        // 设置img的src为base64编码的透明图片 取消浏览器默认图片
                        pic.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
                    }
                    if (typeof readyCallback === "function") readyCallback();
                } else {
                    if (!file.files || !file.files[0]) return;
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        pic.src = evt.target.result;
                        if (typeof readyCallback === "function") readyCallback();
                    }
                    reader.readAsDataURL(file.files[0]);
                }
            }
        });


    </script>

</body>
</html>

 

posted @ 2016-01-13 11:19  超期服役  阅读(1123)  评论(0)  编辑  收藏  举报