如何用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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
详解jQuery中的easyui
Sep 02 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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操作xml
2013/10/27 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
关于php中一些字符串总结
2016/05/05 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python 解析简单的XML数据
2020/07/24 Python
python中selenium库的基本使用详解
2020/07/31 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
会计岗位职责
2013/11/08 职场文书
防汛工作情况汇报
2014/10/28 职场文书
行政经理岗位职责
2015/04/15 职场文书
教育读书笔记
2015/07/02 职场文书
公司酒会致辞
2015/07/30 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL