上传图片预览--图片上传后显示在某个模块中 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<input id="file_upload" type="file" />
<div class="image_container">
    <img id="preview" width="100" height="100">
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
</html>
html
   $(function() {
       $("#file_upload").change(function() {
           var $file = $(this);
           var fileObj = $file[0];
           var windowURL = window.URL || window.webkitURL;
           var dataURL;
           var $img = $("#preview");
           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("preview");

               imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
               imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

           }
       });
   });
js

 

posted @ 2016-08-08 16:12  dongxiaolei  阅读(236)  评论(0)  编辑  收藏  举报