├── LICENSE
├── README.md
├── css
    └── tinyImgUpload.css
├── index.html
└── js
    └── tinyImgUpload.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tinyImgUpload
 2 | 一个灵活的图片上传插件，支持预览和异步上传图片，并且不依赖jQuery等js库。   
 3 | A flexible and independent image upload plugin that can preview and upload image asynchronously.   
 4 | 
 5 | ## 使用方法   
 6 | 执行tinyImgUpload方法   
 7 | tinyImgUpload(ele, options)   
 8 | @param ele [string] [生成组件的元素的选择器]    
 9 | @param options [Object] [对组件设置的基本参数]   
10 | options具体参数如下   
11 |  * path 图片上传的地址路径 必需
12 |  * onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
13 |  * onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需   
14 |  
15 | @return [function] [执行图片上传的函数]
16 |  
17 | 示例   
18 | 用户引入插件代码后，只需要像下面这样，设置一些参数，然后执行一个方法就生成一个图片上传组件。
19 | ```
20 | <div id="upload"></div>  // 这是用来生成图片上传组件的div
21 | ```
22 | ```
23 | <script>
24 | // 设置参数
25 | var options = {
26 |     path: '/',    // 上传图片时指定的地址路径，类似form变淡的action属性
27 |     onSuccess: function (res) {    // 上传成功后执行的方法，res是接收的ajax响应内容
28 |         console.log(res);  
29 |     },
30 |     onFailure: function (res) {    // 上传失败后执行的方法，res是接收的ajax响应内容
31 |         console.log(res);
32 |     }
33 | }
34 | // 执行生成图片上传插件的方法, 第一个参数是上面提到的准备生成组件的div选择器，第二个参数是设置的组件信息，执行方法后返回一个函数指针，指向执行上传功能的函数，通过把执行上传功能的函数暴露出来，用户就可以自己控制何时上传图片了。
35 | var upload = tinyImgUpload('#upload', options);  
36 | </script>
37 | ```   
38 | 


--------------------------------------------------------------------------------
/css/tinyImgUpload.css:
--------------------------------------------------------------------------------
 1 | #img-container {
 2 | 
 3 | }
 4 | #img-container:after {
 5 |     content: '.';
 6 |     display: block;
 7 |     height: 0;
 8 |     visibility: hidden;
 9 |     overflow: hidden;
10 |     clear: both;
11 | }
12 | .img-item {
13 |     position: relative;
14 |     float: left;
15 |     margin-right: 0.1875rem;
16 |     margin-bottom: 0.1875rem;
17 |     height: 2.34375rem;
18 |     width: 2.34375rem;
19 |     box-sizing: border-box;
20 | }
21 | .img-thumb {
22 |     border: 1px solid #000;
23 | }
24 | .thumb-icon {
25 |     width: 100%;
26 |     height: 100%;
27 | }
28 | .img-up-add {
29 |     display: table;
30 |     border: 1px dashed #E0E0E0;
31 | }
32 | .img-add-icon {
33 |     display: table-cell;
34 |     vertical-align: middle;
35 |     text-align: center;
36 | }
37 | .img-remove {
38 |     position: absolute;
39 |     right: -0.1875rem;
40 |     top: -0.1875rem;
41 |     display: block;
42 |     width: 0.375rem;
43 |     height: 0.375rem;
44 |     border-radius: 50%;
45 |     background: #f7333d;
46 |     color: #fff;
47 |     text-align: center;
48 |     text-decoration: none;
49 |     font-size: 0.25rem;
50 |     overflow: hidden;
51 |     background-clip: padding-box;
52 | }
53 | #img-file-input {
54 |     display: none;
55 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 6 |     <title>图片上传</title>
 7 |     <link rel="stylesheet" href="css/tinyImgUpload.css">
 8 | </head>
 9 | <body>
10 | 
11 | <div id="upload">
12 | 
13 | </div>
14 | <button class="submit">submit</button>
15 | <script src="js/tinyImgUpload.js"></script>
16 | <script>
17 | document.documentElement.style.fontSize = document.documentElement.clientWidth*0.1+'px';
18 | 
19 | var options = {
20 |     path: '/',
21 |     onSuccess: function (res) {
22 |         console.log(res);
23 |     },
24 |     onFailure: function (res) {
25 |         console.log(res);
26 |     }
27 | }
28 | 
29 | var upload = tinyImgUpload('#upload', options);
30 | document.getElementsByClassName('submit')[0].onclick = function (e) {
31 |     upload();
32 | }
33 | </script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/js/tinyImgUpload.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * tinyImgUpload
  3 |  * @param ele [string] [生成组件的元素的选择器]
  4 |  * @param options [Object] [对组件设置的基本参数]
  5 |  * options具体参数如下
  6 |  * path 图片上传的地址路径 必需
  7 |  * onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
  8 |  * onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
  9 |  * @return [function] [执行图片上传的函数]
 10 |  * 调用方法
 11 |  * tinyImgUpload('div', options)
 12 |  */
 13 | function tinyImgUpload(ele, options) {
 14 |     // 判断容器元素合理性并且添加基础元素
 15 |     var eleList = document.querySelectorAll(ele);
 16 |     if(eleList.length == 0){
 17 |         console.log('绑定的元素不存在');
 18 |         return;
 19 |     }else if(eleList.length>1){
 20 |         console.log('请绑定唯一元素');
 21 |         return;
 22 |     }else {
 23 |         eleList[0].innerHTML ='<div id="img-container" >'+
 24 |                 '<div class="img-up-add  img-item"> <span class="img-add-icon">+</span> </div>'+
 25 |                 '<input type="file" name="files" id="img-file-input" multiple>'+
 26 |                 '</div>';
 27 |         var ele = eleList[0].querySelector('#img-container');
 28 |         ele.files = [];   // 当前上传的文件数组
 29 |     }
 30 | 
 31 |     // 为添加按钮绑定点击事件，设置选择图片的功能
 32 |     var addBtn = document.querySelector('.img-up-add');
 33 |     addBtn.addEventListener('click',function () {
 34 |         document.querySelector('#img-file-input').value = null;
 35 |         document.querySelector('#img-file-input').click();
 36 |         return false;
 37 |     },false)
 38 | 
 39 |     // 预览图片
 40 |     //处理input选择的图片
 41 |     function handleFileSelect(evt) {
 42 |         var files = evt.target.files;
 43 | 
 44 |         for(var i=0, f; f=files[i];i++){
 45 |             // 过滤掉非图片类型文件
 46 |             if(!f.type.match('image.*')){
 47 |                 continue;
 48 |             }
 49 |             // 过滤掉重复上传的图片
 50 |             var tip = false;
 51 |             for(var j=0; j<(ele.files).length; j++){
 52 |                 if((ele.files)[j].name == f.name){
 53 |                     tip = true;
 54 |                     break;
 55 |                 }
 56 |             }
 57 |             if(!tip){
 58 |                 // 图片文件绑定到容器元素上
 59 |                 ele.files.push(f);
 60 | 
 61 |                 var reader = new FileReader();
 62 |                 reader.onload = (function (theFile) {
 63 |                     return function (e) {
 64 |                         var oDiv = document.createElement('div');
 65 |                         oDiv.className = 'img-thumb img-item';
 66 |                         // 向图片容器里添加元素
 67 |                         oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+
 68 |                                         '<a href="javscript:;" class="img-remove">x</a>'
 69 | 
 70 |                         ele.insertBefore(oDiv, addBtn);
 71 |                     };
 72 |                 })(f);
 73 | 
 74 |                 reader.readAsDataURL(f);
 75 |             }
 76 |         }
 77 |     }
 78 |     document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);
 79 | 
 80 |     // 删除图片
 81 |     function removeImg(evt) {
 82 |         if(evt.target.className.match(/img-remove/)){
 83 |             console.log('3',ele.files);
 84 |             // 获取删除的节点的索引
 85 |             function getIndex(ele){
 86 | 
 87 |                 if(ele && ele.nodeType && ele.nodeType == 1) {
 88 |                     var oParent = ele.parentNode;
 89 |                     var oChilds = oParent.children;
 90 |                     for(var i = 0; i < oChilds.length; i++){
 91 |                         if(oChilds[i] == ele)
 92 |                             return i;
 93 |                     }
 94 |                 }else {
 95 |                     return -1;
 96 |                 }
 97 |             }
 98 |             // 根据索引删除指定的文件对象
 99 |             var index = getIndex(evt.target.parentNode);
100 |             ele.removeChild(evt.target.parentNode);
101 |             if(index < 0){
102 |                 return;
103 |             }else {
104 |                 ele.files.splice(index, 1);
105 |             }
106 |             console.log('4',ele.files);
107 |         }
108 |     }
109 |     ele.addEventListener('click', removeImg, false);
110 | 
111 |     // 上传图片
112 |     function uploadImg() {
113 |         console.log(ele.files);
114 | 
115 |         var xhr = new XMLHttpRequest();
116 |         var formData = new FormData();
117 | 
118 |         for(var i=0, f; f=ele.files[i]; i++){
119 |             formData.append('files', f);
120 |         }
121 | 
122 |         console.log('1',ele.files);
123 |         console.log('2',formData);
124 | 
125 |         xhr.onreadystatechange = function (e) {
126 |             if(xhr.readyState == 4){
127 |                 if(xhr.status == 200){
128 |                     options.onSuccess(xhr.responseText);
129 |                 }else {
130 |                     options.onFailure(xhr.responseText);
131 |                 }
132 |             }
133 |         }
134 | 
135 |         xhr.open('POST', options.path, true);
136 |         xhr.send(formData);
137 | 
138 |     }
139 |     return uploadImg;
140 | }
141 | 
142 | 


--------------------------------------------------------------------------------