Question

js点击个人照片出现文件选择框,系统的,选择自己的照片后替换以前的个人照片

个人照片这是一个照片, 上面四个字个人照片, 我点击这张照片然后选择自己的头像, 然后替换这张个人照片。进行新增。我在做人事的一个项目, 涉及到入职, 所以有照片, 希望各位大神们不要吝啬。谢谢了

Answer 1

首先这个是可以实现的，处理办法是将上传按钮FileUpload隐藏，用显示图片的对象的onclick事件触发FileUpload的onclick事件， 但是会存在以下问题：

1. 由于安全问题你通过点击其它对象去选择的照片后台是获取不到图片的！

2. 兼容性问题，有的浏览器是不兼容的

代码如下：

<script type="text/javascript">

    function PreviewImage() {
        var pic = document.getElementById("preview");
        file = document.getElementById("upLoadFile");
        var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
        // gif在IE浏览器暂时无法显示
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
            alert("图片的格式必须为png或者jpg或者jpeg格式！");
            return;
        }

        var isIE = navigator.userAgent.match(/MSIE/) != null,
            isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;

        if (isIE) {
            file.select();
            var reallocalpath = file.value;
            // IE6浏览器设置img的src为本地路径可以直接显示图片
            if (isIE6) {
                pic.src = reallocalpath;
            } else {
                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + reallocalpath + "\")";
                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
                //alert(pic.offsetHeight);
                pic.style.width = "130px";
                pic.height = "156px";
            }

        } else {

            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;
            }
        }
     
    }
</script>