Html5实现单张、多张图片上传功能

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

2|0实现

2|1前端部分

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

<div class="form-group form-row"> <label class="col-sm-2 control-label uText">俱乐部相册</label><div class="row"> <div class="col-xs-10 col-sm-8 mTop5"> <label title="上传俱乐部相册" for="ClubImagesUpload" id="btnClubImg" class="col-sm-2"> <input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple"> <img src=http://www.jb51.net/html5/"/Images/registerNewSite/btn_addimg.png" class="addImg"/> </label> </div> </div></div>

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

<div class="form-group form-row" id="preViewMore"><div class="row"> <div class="col-xs-9"> <div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm"></div> </div> </div></div>

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

好，我们继续分析，因为我们想要能当input框改变的时候，说简单点 就是有选择到文件的时候，我们能获取到当前选择的文件，这个和获取input框文字输入是一样的道理，所以，经过分析，我们知道需要给input标签加一个change事件：

$("#btnClubImg").click(function() { var $input = $("#ClubImagesUpload"); console.log($input); $input.on("change", function () { console.log(this);//打印改变后的当前元素 }); });

让我们来瞄一眼，获取到改变后的input元素里面有些啥东东：

这里很清楚得可以看到，我们获取到了选择的图片，包括有最后修改事件，图片名称，大小以及图片类型(有了文件类型，我们就可以判断当前用户选择的是否是图片不是吗(斜眼笑)) 同样，这是单个文件的， 如果是多个文件，就会有多个file

接着往下看，通过打印输出我们可以看到，我们再input 标签的files元素上已经拿到了我们想要的文件信息，我们只需要获取它们就行了：

var files = this.files; var length = files.length;

这样，我们就可以获取到所有文件，以及文件的个数，那这里问题来了，我们如果是选择多个文件，如果将其依次输出并展示到页面上呢？看到上面标注的四个字，脑袋中有没有闪现出两个字呢？循环

$.each(files, function (key, value) { //TOTO Something });

通过将上面得到的files 循环，我们可以依次得到每个文件的信息。这样，你就不仅可以将其依次输出，如果你愿意，你还可以将其送上天～

var fileReader = new FileReader();//实例化一个FileReader对象 var file_ = files[key];//获取当前文件 if (/^image/w+$/.test(file_.type)) {//将当前文件进行正则匹配，看是否是选择的图片 fileReader.onload = function() {//当读取操作完成时调用 } }

有必要延伸下FileReader的知识点：

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

回到主题，我们已经能够得到文件并且得到返回，所以此时，我们只需要展示返回的结果就行了

$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");

我们将其this.result打印出来看看是个什么东东:

不言而喻，是将图片转换成了Base64的数据格式。最后，我们调用 readAsDataURL 读取文件内容，将其用data:url字符串表示出来

fileReader.readAsDataURL(value);

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!