<script> $(document).ready(function(){ //为外面的盒子绑定一个点击事件 $("#uploadImgBtn").click(function(){ /* 1、先获取input标签 2、给input标签绑定change事件 3、把图片回显 */ // 1、先回去input标签 var $input = $("#file"); console.log($input) // 2、给input标签绑定change事件 $input.on("change" , function(){ console.log(this) //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件 //获取选择图片的个数 var files = this.files; var length = files.length; console.log("选择了"+length+"张图片"); //3、回显 $.each(files,function(key,value){ //每次都只会遍历一个图片数据 var div = document.createElement("div"), img = document.createElement("img"); div.className = "pic"; var fr = new FileReader(); fr.onload = function(){ img.src=this.result; div.appendChild(img); document.body.appendChild(div); } fr.readAsDataURL(value); }) }) //4、我们把当前input标签的id属性remove $input.removeAttr("id"); //我们做个标记，再class中再添加一个类名就叫test var newInput = '<input type="file" multiple>'; $(this).append($(newInput)); }) }) </script>
效果图
总结
以上所述是小编给大家介绍的如何用input标签和jquery实现多图片的上传和回显功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: