如何用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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery操作元素追加内容示例
Jan 10 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/10/09 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python 元组操作总结
2019/09/18 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
财务副总经理工作职责
2013/11/25 职场文书
受伤赔偿协议书
2014/09/24 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python