上传图片，多图上传，预览功能，js原生无依赖

最近很好奇前端的文件上传功能，由于公司要求作一个支持图片预览的图片上传插件，因此本身搜了不少相关的插件，虽然功能不少，但有些地方不能根据公司的想法去修改，并且须要依赖jQuery或Bootstrap库，因此我就想学下图片上传的原理，试着作一个原生无依赖，并且足够灵活的图片上传插件。话很少说，开整。

1. 大致思路

1.1 首先咱们须要考虑用户如何使用咱们的插件。

用户引入插件代码后，只须要像下面这样，设置一些参数，而后执行一个方法就生成一个图片上传组件。

<div id="upload"></div>  // 这是用来生成图片上传组件的div

<script>
// 设置参数
var options = {
    path: '/',    // 上传图片时指定的地址路径，相似form变淡的action属性
    onSuccess: function (res) {    // 上传成功后执行的方法，res是接收的ajax响应内容
        console.log(res);  
    },
    onFailure: function (res) {    // 上传失败后执行的方法，res是接收的ajax响应内容
        console.log(res);
    }
}
// 执行生成图片上传插件的方法, 第一个参数是上面提到的准备生成组件的div选择器，第二个参数是设置的组件信息，执行方法后返回一个函数指针，指向执行上传功能的函数，经过把执行上传功能的函数暴露出来，用户就能够本身控制什么时候上传图片了。
var upload = tinyImgUpload('#upload', options);  
</script>

1.2 代码设计

咱们须要思考用户如何引入咱们的插件代码。
插件代码应该分为两个文件，一个CSS文件（tinyImgUpload.css），用于定义组件的基本样式，此外用户能够根据本身的想法本身DIY样式，另外一个是控制功能逻辑的js文件（tinyImgUpload.js）。用户引入这两个文件后，就能够实现图片上传组件了。

2. 具体实现

具体实现的时候，主要涉及到两个地方，一个是读取本地文件，实现图片上传前能够预览的功能，一个是图片上传功能。

2.1 读取本地文件实现预览

这里用到了html5的File API，使用这个API能够在客户端验证上传的文件类型，限制文件大小，固然，在这里咱们主要用到FileReader接口来读取文件，Filereader.readAsDataURL()返回的事件对象的result属性就是将文件编码为base64的数据地址，相似下面这样的，把他赋值给src属性，图片就显示出来了。

具体代码以下，完整代码能够从这里下载（tinyImgUpload.js ）

// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
    var files = evt.target.files;

    for(var i=0, f; f=files[i];i++){
        // 过滤掉非图片类型文件
        if(!f.type.match('image.*')){
            continue;
        }
        // 过滤掉重复上传的图片
        var tip = false;
        for(var j=0; j<(ele.files).length; j++){
            if((ele.files)[j].name == f.name){
                tip = true;
                break;
            }
        }
        if(!tip){
            // 图片文件绑定到容器元素上
            ele.files.push(f);

            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var oDiv = document.createElement('div');
                    oDiv.className = 'img-thumb img-item';
                    // 向图片容器里添加元素
                    oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+
                                    '<a href="javscript:;" class="img-remove">x</a>'

                    ele.insertBefore(oDiv, addBtn);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }
}
// input#img-file-input是一个隐藏的上传图片的input控件，当选择图片的时候会触发change事件
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);

2.2 上传图片

2.2.1 准备文件对象

上传文件以前，咱们须要考虑如何保存用户已经选择的文件对象，因为用户可能屡次选择，也可能在上传以前又删除了几个图片，因此须要有一个地方实时保存图片信息，而且要和预览的图片保持同步，预览显示有哪几张图片，这个地方就存储几张图片。我采用的方式是将文件信息组装成一个数组，而后绑定到组件元素（#img-container）的自定义属性上，上面代码中的“ele.files.push(f)”作的就是这件事。

2.2.2 文件对象咱们准备好后，下一步就是上传了

ajax是不能直接上传文件对象的，咱们能够经过FormData对象，FormData是XMLHttpRequest Level 2添加的一个新接口，使用一系列的键值对来模拟一个完整的表单，而后使用XMLHttpRequest异步发送这个"表单"。具体代码以下。

// 上传图片
function uploadImg() {
    var xhr = new XMLHttpRequest();
    var formData = new FormData();

    for(var i=0, f; f=ele.files[i]; i++){
        formData.append('files', f);
    }

    xhr.onreadystatechange = function (e) {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                options.onSuccess(xhr.responseText);
            }else {
                options.onFailure(xhr.responseText);
            }
        }
    }

    xhr.open('POST', options.path, true);
    xhr.send(formData);
}

2.3 设置样式

咱们写了一个基本的布局样式做为默认样式，用户能够根据本身的需求进行DIY。这里是完整的样式文件（tinyImgUpload.css ）。
基本的效果图以下。

若是咱们想触发上传图片，能够把tinyImgUpload('#upload', options)返回的upload方法绑定到一个按钮上，监听点击事件。

<button class="submit">submit</button>
<script>
document.getElementsByClassName('submit')[0].onclick = function (e) {
    upload();
}
</script>

这样当我点击图片的时候，图片就会上传，交给服务器端处理了。

上传按钮

服务器接收的图片

为了测试图片上传好很差用，我本身搭建了一个图片接收的服务器，使用的是node.js，经过multer实现，若是你们感兴趣能够点击这里。

3 总结

图片上传的关键部分就是如何读取本地文件实现预览，以及经过FormData对象构造一个表单对象实现ajax异步上传文件。目前这个插件的功能还不够完善，我把它放到了Github上（https://github.com/gitwd/tinyImgUpload），后续会慢慢优化，欢迎你们提出宝贵意见。

4 参考目录

https://www.html5rocks.com/en/tutorials/file/dndfiles/
http://codecloud.net/9276.html
http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/
https://cnodejs.org/topic/50ce2bbb637ffa415589a50f