我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下。
还是放一下源码,只谈效果,不放源码的都是耍流氓
这是body
<body> <div class="uploadImgBtn" id="uploadImgBtn"> <input class="uploadImg" type="file" name="file" multiple id="file"> </div> </body>
这是css的样式
.uploadImgBtn { width: 100px; height: 100px; cursor: pointer; position: relative; background: url("img/plus.png") no-repeat; -webkit-background-size: cover; background-size: cover; } .uploadImgBtn .uploadImg { position: absolute; right: 0; top:0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } //这是一个用做回显的盒子的样式 .pic{ width: 100px; height: 100px; } .pic img { width: 100%; height: 100%; }
代码的量并没有多少,接下来我们就分析一下如何让图片回显;我知道有两种方式,一种是先上传到服务器,并返回该图片的url,然后渲染在页面中;另一种呢,是利用h5的FileReader对象直接在本地预览图片,用户确认后再上传服务器。
<script> $(document).ready(function(){ //为外面的盒子绑定一个点击事件 $("#uploadImgBtn").click(function(){ /* 1、先获取input标签 2、给input标签绑定change事件 3、把图片回显 */ // 1、先回去input标签 var $input = $("#file"); // 2、给input标签绑定change事件 $input.on("change" , function(){ //补充说明:因为我们给input标签设置multiple属性,因此一次可以上传多个文件 //获取选择图片的个数 var files = this.files; var length = files.length; console.log("选择了"+length+"张图片"); //3、回显 for( var i = 0 ; i < length ; i++ ){ var fr = new FileReader(), div = document.createElement("div"), img = document.createElement("img"); div.className = 'pic'; fr.onload = function(e){ console.log("回显了图片") img.src = this.result; div.appendChild(img) document.body.appendChild(div); } fr.readAsDataURL(files[i]);//读取文件 } }) }) }) </script>
我们选择了三张图片,却显示了一张,话说我们在for循环里创建了三个div和img却只显示了一张图片,这里面肯定有蹊跷。
<script> $(document).ready(function(){ //为外面的盒子绑定一个点击事件 $("#uploadImgBtn").click(function(){ /* 1、先获取input标签 2、给input标签绑定change事件 3、把图片回显 */ // 1、先回去input标签 var $input = $("#file"); // 2、给input标签绑定change事件 $input.on("change" , function(){ //补充说明:因为我们给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); }) }) }) }) </script>
在看一下运行的效果
<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 class="uploadImg test" type="file" name="file" multiple id="file">'; $(this).append($(newInput)); }) }) </script>
如对本文有疑问, 点击进行留言回复!!
sap cloud platform destination的配置
springcloud中feign调用处理mybatis-plus Ipage反序列化问题。
Flume 史上最全面的大数据学习第十篇(一) 别再说不知道flume是什么了
网友评论