HTML中预览图片的JQeury代码

最新推荐文章于 2024-09-05 16:19:18 发布

原创最新推荐文章于 2024-09-05 16:19:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

java学习同时被 3 个专栏收录

51 篇文章

订阅专栏

JavaEE学习

46 篇文章

订阅专栏

javascript学习

10 篇文章

订阅专栏

本文介绍如何使用JavaScript实现文件上传并实时预览图片功能，通过改变输入框的事件监听来获取用户选择的文件，并利用FileReader API读取文件内容进行预览。

$(function(){
	
     $("input[type='file']").change(function(evt){
         var files = evt.target.files; 
         alert("preview!!");
         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) {                                
              $("#preview").attr("src",e.target.result);  //预览图片的位置                 
             };
           })(f);
           
           reader.readAsDataURL(f);
         }
     });
 });