如何实现上传多个图片并依次展示_Html5实现单张、多张图片上传功能

前言

今天我们聊一聊图片上传，单张Or多张 ，如今，各大图片上传插件数不胜数，例如：Jquery的 verupload.js，jQuery File Upload、Uploadify、jQuery.filter等等。But。上面说到的这些插件，今天我们不谈，我们来看一看使用HTML5中的FileReader 如何实现 图片的单张及多张预览、删除、上传等功能。先看下实现后的效果如下：

2|0实现

2|1前端部分

这块是用户点击按钮 其中我们最重要的一句话是input type=file 和给了一个multiple属性，可以满足多张图片上传

俱乐部相册

下面这块区域是用于图片预览的

2|2样式部分

什么？连样式你都要看，还有没有人性(苦笑脸)

2|3Js部分

首先我们分析下上面的html，我们用一个label把input和一个img标签包起来了，我们希望点击效果图那个+号图片，就能弹出选择相片的对话框，所以，我们需要先给label来一个点击事件：

$("#btnClubImg").click(function() {

//TODO Something

});

接着我们再看，因为我们是要获取上传的文件，而我们的文件主要是在input上，所以，我们先将input标签获取到：

$("#btnClubImg").click(function() {

var $input = $("#ClubImagesUpload");

console.log($input);//打印当前元素

});

我们将当前input元素标签打印出来看看是个什么东东

我们展开第一项会发现files里面length长度是0