js实现图片预览功能

最近在项目上遇到图片无法预览的问题，最后用change事件实现，不太完美但可以先使用

js代码

 $(function () {
            $("#Picture").change(function () {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $("#Image");
                if (fileObj && fileObj.files && fileObj.files[0]) {
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $img.attr('src', dataURL);
                } else {
                    dataURL = $file.val();
                    var imgObj = document.getElementById("Image");
                    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                }
            });
        })

前台代码

 <div class="form_group_change">
                        <div class="control_label_change">
                            <b><p style="height:108px; line-height:108px; text-align:right; color:#757575;">当前形象图</p></b>
                        </div>
                        <div class="control_form_change">
                               <img src="" id="Image"  height="100px"/>
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="control_label">
                            <b><p>商品形象图</p></b>
                        </div>
                        <div class="control_form">
                               <input class="doc" name="Picture" type="file" id="Picture" value=""  />
                        </div>
                    </div>

有需要的可以参考一下