手机头像上传预览的问题

2016-03-01 10:47:36 243 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue+Springboot实现用户头像上传及保存最近在开发一套前后端分离的企业管理系统时，需要对系统用户个人信息开放给系统用户自助修改更新，其中用户可以对自己用户名指定一个有个性的头像，这涉及到用户可以访问本地照片文件并进行预处理后上传到后端服务器保存起来，后续登录系统时能从后端数据取到头像图片展示在前端页面中。对用户的头像管理需要满足以下几点关键需求：（1）在前端能够预览图片、缩小、放大、截取等预处理操作。（2）头像图片文件上传到后端服... 阅读详情

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 = ""; //清空选中文件

        $("#imgHeadPhoto").attr("src", "../images/NoSmallImg.gif");

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

            fileObj.select();

            document.selection.clear();

        }

        fileObj.outerHTML = fileObj.outerHTML;

    }

}

        <asp:FileUpload id="imgFaceUrl" style="display:none;" runat="server" onchange="PreviewImage(this,'imgFace','divPreview');" />

        <a id="face" class="btn53" href="javascript:void(0);" >

            <span>头像</span>

            <img alt="" class="grzxtx" id="imgFace" runat="server" src="../../images/bg.jpg" />

        </a>

<script type="text/javascript">

    window.jQuery(function() {

        window.jQuery('#face').click(function() {

            window.jQuery('#imgFaceUrl').click();

        });

    });

</script>

只有iPhone看不到预览图（不显示），用chrome的手机模式调试不出（显示正常），怎么修改呢？

...全文