上传图片，多图上传，预览功能，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>

网友评论