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

来源：互联网发布：电信网络机顶盒好用吗编辑：程序博客网时间：2024/05/20 17:28
图片上传本地显示，不上传到服务器
<html><head>    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.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/>    <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>
阅读全文
0 0