html5预览上传图片

来源:互联网 发布:手机视频制作软件排名 编辑:程序博客网 时间:2024/04/27 18:36

<script type="text/javascript" src="./jquery.js"></script>

<script>

    
//图片上传预览
$(function(){
     $("input[type='file']").change(function(evt){
         var files = evt.target.files;
         var which_img = $(this).attr('id');
         for (var i = 0, f; f = files[i]; i++) {
           if (!f.type.match('image.*')) {
             continue;
           }
           var reader = new FileReader();
          reader.onload = (function(theFile) {
             return function(e) {                                
              $("."+which_img).attr("src",e.target.result);  //预览图片的位置
              //限制图片大小
            };
           })(f);
           reader.readAsDataURL(f);
         }
     });
 })
</script>