实现input上传图片时可以选择多张图片并且在前台显示出来

怎么让input上传图片时可以选择多张图片并且在前台显示出来

今天在写代码的时候看到一个模块的需求是这样的，怎么让input上传图片时可以选择多张图片并且在前台显示出来？

大家都知道正常情况下input做上传的时候每次只能选择一张图片，那怎么让他一次性选多张图片了？其实很简单直接加上multiple="multiple"属性就可以了。

<div class="ins-img upImg">
    <input type="file" class="js-upload" multiple="multiple" name="photo">
    <i></i>
</div>

多选的问题解决了，那怎么让选中的图片和下图一样在前台显示出来了？

大家都知道实现图片回显，有两种方式可以实现：

1.先上传到服务器，并返回该图片的url，然后渲染在页面中。
2.利用h5的FileReader对象直接在本地预览图片，用户确认后再上传服务器。

如果只是显示图片多选并回选的效果，用第二种方式就可以，附上代码：
 

$('body').on('change', '#sphoto', function() {

   var files = this.files; //获取选中的文件
   var _this = $(this);
   for(var i=0;i<files.length;i++){

     var fr = new FileReader(); //H5新特性

     fr.onload = function(e){
        console.log("回显了图片")
        var src = this.result;
        var $img = _this.parents('.ins-img');
        $img.before('<div class="ins-img"><img src=' + src + ' alt=""><div class="ins-close"></div></div>')
     }
     fr.readAsDataURL(files[i]);//读取文件
   }
   //避免再次点击选额图片覆盖上次选择的图片 做如下操作
   _this.removeAttr("id"); //隐藏当前的input
   _this.css('z-index',-1); //设置显示层
   var newInput = '<input type="file" class="js-upload" multiple="multiple" name="photo[]" id="sphoto">'; //创建新的上传按钮
   _this.parents('.ins-img').append($(newInput)); //插入新的按钮 因为新的z-index比旧的高 所以再次点击新选择图片实际上点击的是新的input
   console.log(this.files.length);

})

 但是采用第二种方式实现这个功能的话，没办法实现对选择的图片进行删除(比如说第一次选择了6张图，第二次选择了三张图，我要删除几张)，所以萝卜在这里选择了第一种方式，既先上传到服务器，并返回该图片的url，然后渲染在页面中。

用第一种方式，其实也不难，这里萝卜使用了jqeury.form.js插件来实现，当选择完图片之后直接通过插件异步提交表单来实现上传。然后通过上传后返回的图片路径来实现前台图片的显示，这里就不贴代码了。同学们如果想要这块的代码，请在下方留言，萝卜在整理下发出来！

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/112/545.html

很赞哦！ (0)