如何用input标签和jquery实现多图片的上传和回显功能


Posted in jQuery onMay 16, 2018

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图

如何用input标签和jquery实现多图片的上传和回显功能 

效果图

我们从零来做一个这样的demo

第一步:

我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下。

如何用input标签和jquery实现多图片的上传和回显功能 

大概的样式

还是放一下源码,只谈效果,不放源码的都是耍流氓

这是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>

代码的思路也可以说是很简单,先给外面的盒子绑定点击事件,然后获取input标签,给input标签绑定change事件,然后用一个for循环把获得的数据回显出来,for循环里有一个异步事件onload是用来渲染图片,来我们看看效果图

如何用input标签和jquery实现多图片的上传和回显功能 

效果图

我们选择了三张图片,却显示了一张,话说我们在for循环里创建了三个div和img却只显示了一张图片,这里面肯定有蹊跷。

我们来仔细分析一下,前面我已经说了,回显的for循环里面有一个异步事件,既然是异步的,可能for循环执行完了,才执行onload事件使我们设置的下标i值和预期的结果不一致;那我们如何解决呢,如果我们能形成一个函数作用域,在里面每次回显一张图片,我觉得我们就可能解决了。我们来尝试一下,我们前端可以使用jquery的each方案,它自带回调函数,形成了函数作用域。我们看一下代码

<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>

在看一下运行的效果

如何用input标签和jquery实现多图片的上传和回显功能 

效果图

这回就达到了我们的预期效果。这就结束了吗,肯定不是的,当我们再次点击上传图片按钮,肯定会把上一次的结果给覆盖掉,那当我们跑业务的时候,这肯定不是我们想要看到的,那我们如何解决这个问题呢,那肯定是用多个input标签啊,那我们怎么能保证我们点击的时候就是新加的那个input标签呢,我的解决方案是这样的,我们把上一次的input标签的id属性清除掉,为我们新生成的input标签加上这个属性,因为我们是通过id绑定事件的,所以我们就可以为我们新生成的input标签绑定事件了,而原来的input标签因为没有了id属性,而不被选中,我们来看代码

<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>

如何用input标签和jquery实现多图片的上传和回显功能 

效果图

总结

以上所述是小编给大家介绍的如何用input标签和jquery实现多图片的上传和回显功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
You might like
php写app用的框架整理
2019/09/29 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python 读取位于包中的数据文件
2020/08/07 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
Linux常见面试题
2016/10/04 面试题
大学生个人简历中的自我评价
2013/12/27 职场文书
手工社团活动方案
2014/02/17 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
入党积极分子评语
2014/05/04 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2015入党自传书范文
2015/06/26 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang