码迷,mamicode.com
首页 > Web开发 > 详细

flie文件上传图片预览

时间:2018-07-04 17:31:49      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:fileread   fun   style   .sh   code   var   target   col   else   

html代码如下

<div class="col-sm-10">
     <input type="file" class="form-control shenfen" >
     <img class="shenfen_img" width="200" src="">
 </div>

jq代码如下

<script>
      $(function(){
            $(".shenfen").on(‘change‘, function () {
                  if (typeof (FileReader) != "undefined") {
                          var img = $(this).siblings(".shenfen_img");
                          var reader = new FileReader();
                          reader.onload = function (e) {
                                img.attr("src",e.target.result)
                          }
                           reader.readAsDataURL($(this)[0].files[0]);
                   } else {
                           alert("你的浏览器不支持FileReader.");
                   }
             });
       })
</script> 

预览效果如下:

技术分享图片

flie文件上传图片预览

标签:fileread   fun   style   .sh   code   var   target   col   else   

原文地址:https://www.cnblogs.com/xiaokele1314/p/9264141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!