如何用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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
实例详解Python模块decimal
2019/06/26 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
毕业生的自我评价范文
2013/12/31 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
2014年党支部学习材料
2014/05/19 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
依法行政工作汇报
2014/10/28 职场文书
师范生见习报告
2014/10/31 职场文书
音乐剧猫观后感
2015/06/04 职场文书
结婚司仪主持词
2015/06/29 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP