如何用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 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
第十一节--重载
2006/11/16 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jstree的简单实例
2016/12/01 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
利用python发送和接收邮件
2016/09/27 Python
详解Python自建logging模块
2018/01/29 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server