js上传图片图片回显

 <div id="imgdiv">
                           <!-- <img id="ImgPr" width="150" height="250" />-->
                            <img id="photourlShow" width="300" height="197"/>
                        </div>

                        <a href="javascript:;" class="a-upload" style="margin-left: 85px">
                            <input type="file" id="invitation_photo" accept="image/*" name="file" data="ImgPr" datatype="img_ico" nullmsg="请上传图片">
                        </a>

(function () {
        'use strict';
        var file = document.querySelector('#invitation_photo');

        var xhr = new XMLHttpRequest();
        var loaded = 0, ot = 0, total = 0, oloaded = 0;//;
        file.addEventListener('change', previewImage, false);

        // 图片预览
        function previewImage(event) {
            //imgPreview.innerHTML = ''
            // 每次重新选择文件的时候，都会去除上次选择产生的img标签
            var isImg = (event.target.files[0].type).indexOf('image/') > -1;
            if (isImg) {
                // 如果是图片 就解析图片预览
                //var img = document.createElement('img')
                //imgPreview.appendChild(img)
                var reader = new FileReader();
                reader.onload = function (event) {
                    //img.src = event.target.result;
                    //img.width = '200'

                    $("#photourlShow").attr('src', event.target.result);

                };
                reader.readAsDataURL(event.target.files[0]);
            } else {
                layer.msg("请选择图片文件");
                // imgPreview.appendChild('<img src=""/>')
                // 可以为非图片文件选择一个默认的文件logo
            }
        }

        //++++++++++++++++++++++++++++++++++++++++++++
    })();