js实现图片预览功能

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

js代码

 1  $(function () {
 2             $("#Picture").change(function () {
 3                 var $file = $(this);
 4                 var fileObj = $file[0];
 5                 var windowURL = window.URL || window.webkitURL;
 6                 var dataURL;
 7                 var $img = $("#Image");
 8                 if (fileObj && fileObj.files && fileObj.files[0]) {
 9                     dataURL = windowURL.createObjectURL(fileObj.files[0]);
10                     $img.attr('src', dataURL);
11                 } else {
12                     dataURL = $file.val();
13                     var imgObj = document.getElementById("Image");
14                     imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
15                     imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
16                 }
17             });
18         })

View Code

前台代码

 1  <div class="form_group_change">
 2                         <div class="control_label_change">
 3                             <b><p style="height:108px; line-height:108px; text-align:right; color:#757575;">当前形象图</p></b>
 4                         </div>
 5                         <div class="control_form_change">
 6                                <img src="" id="Image"  height="100px"/>
 7                         </div>
 8                     </div>
 9                     <div class="form_group">
10                         <div class="control_label">
11                             <b><p>商品形象图</p></b>
12                         </div>
13                         <div class="control_form">
14                                <input class="doc" name="Picture" type="file" id="Picture" value=""  />
15                         </div>
16                     </div>

View Code

有需要的可以参考一下