├── .gitignore
├── static
    ├── image
    │   ├── 1.jpg
    │   ├── 2.png
    │   └── 3.jpg
    └── js
    │   └── cupload.js
├── delete.php
├── upload.php
├── form.php
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /upload


--------------------------------------------------------------------------------
/static/image/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crzhi/cupload/HEAD/static/image/1.jpg


--------------------------------------------------------------------------------
/static/image/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crzhi/cupload/HEAD/static/image/2.png


--------------------------------------------------------------------------------
/static/image/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crzhi/cupload/HEAD/static/image/3.jpg


--------------------------------------------------------------------------------
/delete.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | //异步上传，post提交过来的image是字符串
 4 | $path = $_POST['image'];
 5 | 
 6 | //注意相对路径和绝对路径问题，此为demo，开发请灵活判断
 7 | 
 8 | //检测图片路径
 9 | if(file_exists($path)) {
10 | 	if(unlink($path)) {
11 | 		$id = $_POST['id'] + 1;
12 | 		die('删除成功,你删除了第' . $id . '张图片');
13 | 	}else{
14 | 	    die("error");
15 | 	}
16 | }else{
17 |     die("error");
18 | }
19 | 


--------------------------------------------------------------------------------
/upload.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | //异步上传，post提交过来的image是字符串
 4 | 
 5 | //接收post传来的base64
 6 | $base64Str = $_POST['image'];
 7 | //post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
 8 | $base64Image = str_replace(' ', '+', $base64Str);
 9 | //匹配出图片的格式
10 | if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64Image, $result)){
11 | 	//获取后缀
12 |     $type = $result[2];
13 |     //设置保存路径
14 |     $filePath = "./upload/";
15 |     if(!file_exists($filePath)){
16 |         mkdir($filePath, 0755);
17 |     }
18 |     //设置文件名
19 |     $fileName = uniqid() . rand(0000,9999);
20 |     //设置图片路径
21 |     $newFile = $filePath.$fileName.".{$type}";
22 |     //存放图片
23 |     if (file_put_contents($newFile, base64_decode(str_replace($result[1], '', $base64Image)))){
24 |             //返回文件路径
25 |         die($newFile);
26 |     }else{
27 |         die("error");
28 |     }
29 | }else{
30 |     die("error");
31 | }
32 | 


--------------------------------------------------------------------------------
/form.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | //form提交，post提交过来的image是数组
 4 | 
 5 | //接收post传来的base64
 6 | $base64Arr = $_POST['image'];
 7 | $arr = array();
 8 | foreach ($base64Arr as $key => $base64) {
 9 | 	//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
10 | 	$base64Image = str_replace(' ', '+', $base64);
11 | 	//匹配出图片的格式
12 | 	if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64Image, $result)){
13 | 		//获取后缀
14 | 	    $type = $result[2];
15 | 	    //设置保存路径
16 | 	    $filePath = "./upload/";
17 | 	    if(!file_exists($filePath)){
18 | 	        mkdir($filePath, 0755);
19 | 	    }
20 |         //设置文件名
21 | 	    $fileName = uniqid() . rand(0000,9999);
22 | 	    //设置图片路径
23 | 	    $newFile = $filePath.$fileName.".{$type}";
24 | 	    //存放图片
25 | 	    if (file_put_contents($newFile, base64_decode(str_replace($result[1], '', $base64Image)))){
26 | 	    	//返回文件路径
27 | 	        array_push($arr, $newFile);
28 | 		}else{
29 | 		    die("error");
30 | 		}
31 | 	}else{
32 | 	    die("error");
33 | 	}
34 | }
35 | 
36 | echo('你提交的图片存放在了：' . implode('，', $arr));die;
37 | 
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cupload
 2 | 
 3 | 基于原生js的图片上传插件
 4 | 
 5 | ![](https://img.shields.io/badge/javascript-4EDD96.svg)
 6 | 
 7 | 支持多图上传、选择预览、数量限制、像素限制、大小限制、图片删除、放大预览、图片排序、异步上传、编辑初始化图片
 8 | 
 9 | #### 下载使用
10 | 
11 | 下载：
12 | 
13 | ```html
14 | git clone https://github.com/cuuuuuirz/cupload.git
15 | ```
16 | 
17 | 使用：
18 | 
19 | 引入js：
20 | ```html
21 | <script src="static/js/cupload.js"></script>
22 | ```
23 | 
24 | 在需要的位置添加html：
25 | ```html
26 | <div id="cupload"></div>
27 | ```
28 | 
29 | 实例化cupload对象：
30 | ```html
31 | <script type="text/javascript">
32 | 	var cupload = new Cupload ({
33 | 		ele: "#cupload"
34 | 	});
35 | </script>
36 | ```
37 | 
38 | #### 可选参数
39 | //为方便比较和计算,部分参数为number型,已设置默认单位,不可再带单位。
40 | ```javascript
41 | {
42 | 	ele             : "#cupload",           // 实例化的DOM对象,必需
43 | 	name            : "image",              // 图片input的name名,非必需,默认为image
44 | 	num             : 1,                    // 可上传图片的数量,非必需,默认为1
45 | 	url             : "./upload.php",       // 异步上传url,非必需,无默认值
46 | 	deleteUrl       : "./delete.php",       // 异步删除url,删除时同时删除服务器图片,非必需,无默认值
47 | 	width           : 148,                  // 预览框的宽,单位为px,非必需,默认为148
48 | 	height          : 148,                  // 预览框的高,单位为px,非必需,默认为148
49 | 	minSize         : 1024,                 // 图片大小最小限制,单位为KB,非必需,无默认值
50 | 	maxSize         : 2048,                 // 图片大小最大限制,单位为KB,非必需,无默认值
51 | 	limitedSize     : 2048,                 // 图片大小要求,单位为KB,非必需,无默认值
52 | 	minWidth        : 100,                  // 图片宽度最小限制,单位为px,非必需,无默认值
53 | 	minHeight       : 100,                  // 图片高度最小限制,单位为px,非必需,无默认值
54 | 	maxWidth        : 2000,                 // 图片宽度最大限制,单位为px,非必需,无默认值
55 | 	maxHeight       : 2000,                 // 图片高度最大限制,单位为px,非必需,无默认值
56 | 	limitedWidth    : 800,                  // 图片宽度要求,单位为px,非必需,无默认值
57 | 	limitedHeight   : 800,                  // 图片高度要求,单位为px,非必需,无默认值
58 | 	data            : ["1.png", "2.jpg"],   // 编辑模式下初始显示的图片路径,非必需,无默认值
59 | }
60 | ```
61 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<title>cupload例子</title>
 6 | 	</head>
 7 | 	<body>
 8 | 		<p>简单使用</p>
 9 | 		<div id="cupload-1"></div>
10 | 		<p>多图上传(3张)</p>
11 | 		<div id="cupload-2"></div>
12 | 		<p>异步上传(3张)[请在php环境下运行，否则会出现未知错误]</p>
13 | 		<div id="cupload-3"></div>
14 | 		<p>大小限制(3张，最大2M)</p>
15 | 		<div id="cupload-4"></div>
16 | 		<p>像素限制(3张，最大(w*h)800*800)</p>
17 | 		<div id="cupload-5"></div>
18 | 		<p>初始化加载图片(5张, 已有三张)</p>
19 | 		<div id="cupload-6"></div>
20 | 		<p>post提交模式(3张)[请在php环境下运行，否则会出现未知错误]</p>
21 | 		<form method="post" action="./form.php">
22 | 			<div id="cupload-7"></div>
23 | 			<button type="submit">提交</button>
24 | 		</form>
25 | 		<p>删除时同时删除服务器图片(5张, 初始化已有三张)[请在php环境下运行，否则会出现未知错误][注意，图片删了可就没了]</p>
26 | 		<div id="cupload-8"></div>
27 | 	</body>
28 | 	<script src="static/js/cupload.js"></script>
29 | 	<script type="text/javascript">
30 | 		var cupload1 = new Cupload ({
31 | 			ele: '#cupload-1',
32 | 		});
33 | 
34 | 		var cupload2 = new Cupload ({
35 | 			ele: '#cupload-2',
36 | 			num: 3,
37 | 		});
38 | 
39 | 		var cupload3 = new Cupload ({
40 | 			ele	 : '#cupload-3',
41 | 			name : 'image',
42 | 			num  : 3,
43 | 			url  : './upload.php',
44 | 		});
45 | 
46 | 		var cupload4 = new Cupload ({
47 | 			ele	 : '#cupload-4',
48 | 			num  : 3,
49 | 			maxSize: 2048,
50 | 		});
51 | 
52 | 		var cupload5 = new Cupload ({
53 | 			ele	 : '#cupload-5',
54 | 			num  : 3,
55 | 			maxWidth: 800,
56 |     		maxHeight: 800,
57 | 		});
58 | 
59 | 		var cupload6 = new Cupload ({
60 | 			ele	 : '#cupload-6',
61 | 			num  : 5,
62 | 			data : ["./static/image/1.jpg", "./static/image/2.png", "./static/image/3.jpg"],
63 | 		});
64 | 
65 | 		var cupload7 = new Cupload ({
66 | 			ele	: '#cupload-7',
67 | 			name: 'image',
68 | 			num	: 3,
69 | 		});
70 | 
71 | 		var cupload6 = new Cupload ({
72 | 			ele	 : '#cupload-8',
73 | 			num  : 5,
74 | 			data : ["./static/image/1.jpg", "./static/image/2.png", "./static/image/3.jpg"],
75 | 			deleteUrl: './delete.php',
76 | 		});
77 | 
78 | 	</script>
79 | </html>


--------------------------------------------------------------------------------
/static/js/cupload.js:
--------------------------------------------------------------------------------
  1 | (function(window, document) {
  2 | 
  3 | 	//定义上传类
  4 | 	var Cupload = function(options) {
  5 | 
  6 | 		//初始化 new对象
  7 | 		if (!(this instanceof Cupload)) {
  8 | 			return new Cupload(options)
  9 | 		}
 10 | 
 11 | 		//设置默认参数
 12 | 		this.localValue = {
 13 | 			ele: '#cupload',
 14 | 			name: 'image',
 15 | 			num: 1,
 16 | 			width: 148,
 17 | 			height: 148,
 18 | 		}
 19 | 
 20 | 		//参数覆盖
 21 | 		this.opt = this.extend(this.localValue, options, true)
 22 | 
 23 | 		//所需变量
 24 | 		this.i = 0;
 25 | 		this.imageArr 		= new Array();//图片
 26 | 		this.widthArr 		= new Array();//图片宽度
 27 | 		this.heightArr 		= new Array();//图片高度
 28 | 		this.imageBox 		= new Array();//图片盒子
 29 | 		this.imagePreview 	= new Array();//图片预览
 30 | 		this.imageInput 	= new Array();//图片input
 31 | 		this.imageDelete 	= new Array();//图片删除遮罩
 32 | 		this.deleteBtn 		= new Array();//图片删除按钮
 33 | 		this.sortLeftBtn	= new Array();//图片左排序按钮
 34 | 		this.sortRightBtn	= new Array();//图片右排序按钮
 35 | 
 36 | 		if ((typeof options.ele) === "string") {
 37 | 			this.opt.ele = document.querySelector(options.ele)
 38 | 		} else {
 39 | 			this.opt.ele = options.ele
 40 | 		}
 41 | 
 42 | 		this.initDom();
 43 | 	}
 44 | 
 45 | 	Cupload.prototype = {
 46 | 		constructor: this,
 47 | 
 48 | 		//初始化
 49 | 		initDom: function() {
 50 | 			this.cteateImageList()
 51 | 			this.createUploadBox()
 52 | 			this.createOverlay()
 53 | 			if (this.opt.data) {
 54 | 				this.showImagePreview()
 55 | 			}
 56 | 		},
 57 | 
 58 | 		//参数覆盖
 59 | 		extend: function(o, n, override) {
 60 | 			for (var key in n) {
 61 | 				if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {
 62 | 					o[key] = n[key]
 63 | 				}
 64 | 			}
 65 | 			return o
 66 | 		},
 67 | 
 68 | 		//创建图片列表
 69 | 		cteateImageList: function() {
 70 | 			this.imageList = document.createElement('ul')
 71 | 			this.imageList.className = 'cupload-image-list'
 72 | 			this.imageList.style.margin = 0
 73 | 			this.imageList.style.padding = 0
 74 | 			this.imageList.style.display = 'inline-block'
 75 | 			this.imageList.style.minHeight = this.opt.height
 76 | 			this.opt.ele.appendChild(this.imageList)
 77 | 			this.imageList.ondragstart = function(event) {
 78 | 				console.log('start')
 79 | 			}
 80 | 		},
 81 | 
 82 | 		//创建上传框
 83 | 		createUploadBox: function() {
 84 | 			this.uploadBox = document.createElement('div')
 85 | 			this.uploadBox.className = 'cupload-upload-box'
 86 | 			this.uploadBox.style.position = 'relative'
 87 | 			this.uploadBox.style.display = 'inline-block'
 88 | 			this.uploadBox.style.textAlign = 'center'
 89 | 			this.uploadBox.style.backgroundColor = '#fbfdff'
 90 | 			this.uploadBox.style.border = '1px dashed #c0ccda'
 91 | 			this.uploadBox.style.borderRadius = '6px'
 92 | 			this.uploadBox.style.WebkitBoxSizing = 'border-box'
 93 | 			this.uploadBox.style.boxSizing = 'border-box'
 94 | 			this.uploadBox.style.width = this.opt.width + 'px'
 95 | 			this.uploadBox.style.height = this.opt.height + 'px'
 96 | 			this.uploadBox.style.lineHeight = this.opt.height + 'px'
 97 | 			this.opt.ele.appendChild(this.uploadBox)
 98 | 			this.createUploadBtn()
 99 | 			this.createUploadInput()
100 | 			var _this = this
101 | 			this.uploadBox.onmouseover = function() {
102 | 				_this.uploadBox.style.borderColor = '#409eff'
103 | 			}
104 | 			this.uploadBox.onmouseout = function() {
105 | 				_this.uploadBox.style.borderColor = '#c0ccda'
106 | 			}
107 | 		},
108 | 
109 | 		//创建遮罩
110 | 		createOverlay: function() {
111 | 			this.overlay = document.createElement('div')
112 | 			this.overlay.className = 'cupload-overlay'
113 | 			this.overlay.style.display = "none"
114 | 			this.overlay.style.position = "fixed"
115 | 			this.overlay.style.textAlign = "center"
116 | 			this.overlay.style.top = 0
117 | 			this.overlay.style.right = 0
118 | 			this.overlay.style.bottom = 0
119 | 			this.overlay.style.left = 0
120 | 			this.overlay.style.zIndex = 9115
121 | 			this.overlay.style.backgroundColor = "rgba(0,0,0,.3)"
122 | 			this.opt.ele.appendChild(this.overlay)
123 | 			var _this = this
124 | 			this.overlay.onclick = function() {
125 | 				_this.zoomOutImage()
126 | 			}
127 | 		},
128 | 
129 | 		//创建上传按钮
130 | 		createUploadBtn: function() {
131 | 			this.uploadBtn = document.createElement('span')
132 | 			this.uploadBtn.className = 'cupload-upload-btn'
133 | 			this.uploadBtn.style.position = 'absolute'
134 | 			this.uploadBtn.style.left = this.opt.width/2 - 14 + 'px'
135 | 			this.uploadBtn.style.fontSize = '28px'
136 | 			this.uploadBtn.style.color = '#8c939d'
137 | 			this.uploadBtn.innerHTML = '+'
138 | 			this.uploadBox.appendChild(this.uploadBtn)
139 | 		},
140 | 
141 | 		//创建上传input
142 | 		createUploadInput: function() {
143 | 			this.uploadInput = document.createElement('input')
144 | 			this.uploadInput.className = 'cupload-upload-input'
145 | 			this.uploadInput.style.position = 'absolute'
146 | 			this.uploadInput.style.top = 0
147 | 			this.uploadInput.style.right = 0
148 | 			this.uploadInput.style.width = '100%'
149 | 			this.uploadInput.style.height = '100%'
150 | 			this.uploadInput.style.opacity = 0
151 | 			this.uploadInput.style.cursor = 'pointer'
152 | 			this.uploadInput.type = 'file'
153 | 			this.uploadInput.multiple = 'multiple'
154 | 			this.uploadInput.accept = 'image/*'
155 | 			this.uploadInput.title = ''
156 | 			this.uploadBox.appendChild(this.uploadInput)
157 | 			var _this = this
158 | 			this.uploadInput.onchange = function() {
159 | 				_this.removeUploadBox()
160 | 				_this.uploadImage()
161 | 			}
162 | 		},
163 | 
164 | 		//上传图片
165 | 		uploadImage: function() {
166 | 			if(this.uploadInput.files.length + this.imageList.children.length > this.opt.num) {
167 | 				this.createUploadBox()
168 | 				alert('图片数量超出限制，请重新选择')
169 | 				return
170 | 			}
171 | 			for(j = 0; j < this.uploadInput.files.length; j++){
172 | 				var file = this.uploadInput.files[j]
173 | 				if (!file || this.limitedSize(file)) {
174 | 					this.createUploadBox()
175 | 					return false
176 | 				}
177 | 				var reader = new FileReader()
178 | 				var _this = this
179 | 				reader.filename = file.name;
180 | 				reader.onload = function(e) {
181 | 					_this.limitedWidthAndHeight(e.target.result, e.target.filename)
182 | 				}
183 | 				reader.readAsDataURL(file);
184 | 			}
185 | 			if (this.uploadInput.files.length + this.imageList.children.length < this.opt.num) {
186 | 				this.createUploadBox()
187 | 			}
188 | 		},
189 | 
190 | 		//检测图片大小限制
191 | 		limitedSize: function(file) {
192 | 			if (this.opt.minSize && file.size < this.opt.minSize * 1024) {
193 | 				alert('图片' + file.name + '大小未到最小限制，请重新选择')
194 | 				return true
195 | 			}
196 | 			if (this.opt.maxSize && file.size > this.opt.maxSize * 1024) {
197 | 				alert('图片' + file.name + '大小超出最大限制，请重新选择')
198 | 				return true
199 | 			}
200 | 			if (this.opt.limitedSize && file.size > this.opt.limitedSize * 1024) {
201 | 				alert('图片' + file.name + '大小不符合要求，请重新选择')
202 | 				return true
203 | 			}
204 | 			return false
205 | 		},
206 | 
207 | 		//检测图片像素限制
208 | 		limitedWidthAndHeight: function(src, name) {
209 | 			var tempImage = new Image()
210 | 			tempImage.src = src
211 | 			var _this = this
212 | 			tempImage.onload = function() {
213 | 				if (_this.opt.minWidth && this.width < _this.opt.minWidth) {
214 | 					alert('图片' + name + '宽度未到最小限制，请重新选择')
215 | 					_this.isCreateUploadBox()
216 | 					return false
217 | 				}
218 | 				if (_this.opt.minHeight && this.height < _this.opt.minHeight) {
219 | 					alert('图片' + name + '高度未到最小限制，请重新选择')
220 | 					_this.isCreateUploadBox()
221 | 					return false
222 | 				}
223 | 				if (_this.opt.maxWidth && this.width > _this.opt.maxWidth) {
224 | 					alert('图片' + name + '宽度超出最大限制，请重新选择')
225 | 					_this.isCreateUploadBox()
226 | 					return false
227 | 				}
228 | 				if (_this.opt.maxHeight && this.height > _this.opt.maxHeight) {
229 | 					alert('图片' + name + '高度超出最大限制，请重新选择')
230 | 					_this.isCreateUploadBox()
231 | 					return false
232 | 				}
233 | 				if (_this.opt.limitedWidth && this.width != _this.opt.limitedWidth) {
234 | 					alert('图片' + name + '宽度不符合要求，请重新选择')
235 | 					_this.isCreateUploadBox()
236 | 					return false
237 | 				}
238 | 				if (_this.opt.limitedHeight && this.height != _this.opt.limitedHeight) {
239 | 					alert('图片' + name + '高度不符合要求，请重新选择')
240 | 					_this.isCreateUploadBox()
241 | 					return false
242 | 				}
243 | 				_this.foreachNum(src, name, this.width, this.height)
244 | 			}
245 | 		},
246 | 
247 | 		//检测图片数量
248 | 		foreachNum: function(src, name, width, height) {
249 | 			if(this.opt.url) {
250 | 				var key = this.opt.name
251 | 				var data = {}
252 | 				data[key] = src
253 | 				var _this = this
254 | 				this.ajaxUploadImage(data, function(res) {
255 | 					_this.createImageBox(res.responseText, res.responseText, width, height)
256 | 				})
257 | 			} else {
258 | 				this.createImageBox(src, name, width, height)
259 | 			}
260 | 		},
261 | 
262 | 		//图片异步上传
263 | 		ajaxUploadImage: function(data,success) {
264 | 			var xhr = null;
265 | 		    if(window.XMLHttpRequest){
266 | 		        xhr = new XMLHttpRequest()
267 | 		    } else {
268 | 		        xhr = new ActiveXObject('Microsoft.XMLHTTP')
269 | 		    }
270 | 		    if(typeof data == 'object'){
271 | 		        var str = '';
272 | 		        for(var key in data){
273 | 		            str += key+'='+data[key]+'&';
274 | 		        }
275 | 		        data = str.replace(/&$/, '');
276 | 		    }
277 | 	        xhr.open('POST', this.opt.url, true);
278 | 	        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
279 | 	        xhr.send(data);
280 | 		    xhr.onreadystatechange = function(){
281 | 		        if(xhr.readyState == 4){
282 | 		            if(xhr.status == 200){
283 | 		               success(xhr)
284 | 		            } else {
285 | 	                    alert(((xhr.responseText).split("</p>")[0]).split("<p>")[1])
286 | 	                    return false
287 | 		            }
288 | 		        }
289 | 		    }
290 | 		},
291 | 
292 | 		//创建图片框
293 | 		createImageBox: function(src, name, width, height, state = true) {
294 | 			this.imageArr[this.i] = src
295 | 			this.widthArr[this.i] = width
296 | 			this.heightArr[this.i] = height
297 | 			this.imageBox[this.i] = document.createElement('li')
298 | 			this.imageBox[this.i].className = 'cupload-image-box'
299 | 			this.imageBox[this.i].style.position = 'relative'
300 | 			this.imageBox[this.i].style.display = 'inline-block'
301 | 			this.imageBox[this.i].style.marginRight = 8 + 'px'
302 | 			this.imageBox[this.i].style.backgroundColor = '#fbfdff'
303 | 			this.imageBox[this.i].style.border = '1px solid #c0ccda'
304 | 			this.imageBox[this.i].style.borderRadius = '6px'
305 | 			this.imageBox[this.i].style.WebkitBoxSizing = 'border-box'
306 | 			this.imageBox[this.i].style.boxSizing = 'border-box'
307 | 			this.imageBox[this.i].style.width = this.opt.width + 'px'
308 | 			this.imageBox[this.i].style.height = this.opt.height + 'px'
309 | 			this.imageList.appendChild(this.imageBox[this.i])
310 | 			this.createImagePreview(src, width, height)
311 | 			this.createImageInput(src)
312 | 			this.createImageDelete(name)
313 | 			if (!state) {
314 | 				this.setDefaultImage()
315 | 			}
316 | 			var _this = this
317 | 			for (var m = 0; m <= this.i; m++) {
318 | 				this.imageBox[m].index = m
319 | 				this.imageBox[m].onmouseover = function(n) {
320 | 					return function() {
321 | 						_this.showImageDelete(n)
322 | 					}
323 | 				}(m)
324 | 
325 | 				this.imageBox[m].onmouseout = function(n) {
326 | 					return function() {
327 | 						_this.hideImageDelete(n)
328 | 					}
329 | 				}(m)
330 | 			}
331 | 			this.i++
332 | 		},
333 | 
334 | 		//创建图片预览框
335 | 		createImagePreview: function(src, width, height) {
336 | 			this.imagePreview[this.i] = document.createElement('img')
337 | 			this.imagePreview[this.i].className = 'cupload-image-preview'
338 | 			this.imagePreview[this.i].style.position = 'absolute'
339 | 			this.imagePreview[this.i].style.top = 0
340 | 			this.imagePreview[this.i].style.left = 0
341 | 			this.imagePreview[this.i].style.right = 0
342 | 			this.imagePreview[this.i].style.bottom = 0
343 | 			this.imagePreview[this.i].style.margin = 'auto'
344 | 			this.imagePreview[this.i].src = src
345 | 			this.setImageAttribute(width, height)
346 | 			this.imageBox[this.i].appendChild(this.imagePreview[this.i])
347 | 		},
348 | 
349 | 		//创建图片input
350 | 		createImageInput: function(src) {
351 | 			this.imageInput[this.i] = document.createElement('input')
352 | 			this.imageInput[this.i].type = 'hidden'
353 | 			this.imageInput[this.i].name = this.opt.name + '[]'
354 | 			this.imageInput[this.i].value = src
355 | 			this.imageBox[this.i].appendChild(this.imageInput[this.i])
356 | 		},
357 | 
358 | 		//创建删除
359 | 		createImageDelete: function(name) {
360 | 			this.imageDelete[this.i] = document.createElement('div')
361 | 			this.imageDelete[this.i].className = 'cupload-image-delete'
362 | 			this.imageDelete[this.i].style.position = 'absolute'
363 | 			this.imageDelete[this.i].style.width = '100%'
364 | 			this.imageDelete[this.i].style.height = '100%'
365 | 			this.imageDelete[this.i].style.left = 0
366 | 			this.imageDelete[this.i].style.top = 0
367 | 			this.imageDelete[this.i].style.textAlign = 'center'
368 | 			this.imageDelete[this.i].style.color = '#fff'
369 | 			this.imageDelete[this.i].style.opacity = 0
370 | 			this.imageDelete[this.i].style.cursor = 'zoom-in'
371 | 			this.imageDelete[this.i].style.backgroundColor = 'rgba(0,0,0,.5)'
372 | 			this.imageDelete[this.i].style.WebkitTransition = '.3s'
373 | 			this.imageDelete[this.i].style.transition = '.3s'
374 | 			this.imageDelete[this.i].title = name
375 | 			this.imageBox[this.i].appendChild(this.imageDelete[this.i])
376 | 			this.createDeleteBtn()
377 | 			this.createSortBtn()
378 | 			var _this = this
379 | 			for (var m = 0; m <= this.i; m++) {
380 | 				this.imageDelete[m].onclick = function(n) {
381 | 					return function() {
382 | 						_this.zoomInImage(n)
383 | 					}
384 | 				}(m)
385 | 			}
386 | 		},
387 | 
388 | 		//创建删除按钮
389 | 		createDeleteBtn: function() {
390 | 			this.deleteBtn[this.i] = document.createElement('span')
391 | 			this.deleteBtn[this.i].className = 'cupload-delete-btn'
392 | 			this.deleteBtn[this.i].style.position = 'absolute'
393 | 			this.deleteBtn[this.i].style.top = 0
394 | 			this.deleteBtn[this.i].style.right = 0
395 | 			this.deleteBtn[this.i].style.margin = 0
396 | 			this.deleteBtn[this.i].style.padding = 0
397 | 			this.deleteBtn[this.i].style.fontSize = '18px'
398 | 			this.deleteBtn[this.i].style.width = '24px'
399 | 			this.deleteBtn[this.i].style.height = '24px'
400 | 			this.deleteBtn[this.i].style.cursor = 'pointer'
401 | 			this.deleteBtn[this.i].style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAwUlEQVRYhe2WwQ3CMAxFPxXqOjAAqGwHo3QNCIxSxuBzcaRStcRxcin4XSJHjv2aNkoBRwHJhmSgnhvJpqbAPqN5ZKeprbU8ydhvEgDoJ2uqCHQyXhW5Maf7mrUEyYdhu7WEab+5HXiZzJXPp88Uijsm6tQ7KkZcYF0CckSDNi5i7uudzqXipbkx63oFLuACPymwzcy/4/NKTcV2/Dp2AQBPACB5sBYneRzXyl18qfAXHDlbBFqRGAoaD1KjzRb4G96BvtfyCUSIygAAAABJRU5ErkJggg==')"
402 | 			this.deleteBtn[this.i].style.backgroundSize = '18px 18px'
403 | 			this.deleteBtn[this.i].style.backgroundRepeat = 'no-repeat'
404 | 			this.deleteBtn[this.i].style.backgroundPosition = 'right top'
405 | 			this.deleteBtn[this.i].innerHTML = ''
406 | 			this.deleteBtn[this.i].title = '删除'
407 | 			this.imageDelete[this.i].appendChild(this.deleteBtn[this.i])
408 | 			var _this = this
409 | 			for (var m = 0; m <= this.i; m++) {
410 | 				this.deleteBtn[m].onclick = function(n) {
411 | 					return function() {
412 | 						_this.deleteImage(n)
413 | 					}
414 | 				}(m)
415 | 			}
416 | 		},
417 | 
418 | 		createSortBtn: function() {
419 | 			this.sortLeftBtn[this.i] = document.createElement('span')
420 | 			this.sortLeftBtn[this.i].className = 'cupload-sort-left'
421 | 			this.sortLeftBtn[this.i].style.position = 'absolute'
422 | 			this.sortLeftBtn[this.i].style.bottom = 0
423 | 			this.sortLeftBtn[this.i].style.left = 0
424 | 			this.sortLeftBtn[this.i].style.margin = 0
425 | 			this.sortLeftBtn[this.i].style.padding = 0
426 | 			this.sortLeftBtn[this.i].style.fontSize = '18px'
427 | 			this.sortLeftBtn[this.i].style.width = '24px'
428 | 			this.sortLeftBtn[this.i].style.height = '24px'
429 | 			this.sortLeftBtn[this.i].style.cursor = 'pointer'
430 | 			this.sortLeftBtn[this.i].style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAABP0lEQVRYhe2UIUsEURRGv7suGza4sCBoENYgGMwWs/4A/4AWwWRyMfgHRCyKGhWsYtegRYOCCGoUk1kwKLiws8dywRFGcXZ23yDMiW8e75z3YK5UUPBfAQbzlK8BEbCa9axySrFJ2pC0klWcGsCALb7Y8aAg8gHgICZfDyJ2eQU4dnEHCPf8QBU4dXkELIaU14BLl7eB+ZDyOnDt8g9gLqR8BHhw+Rsw00/ft98IaEg6lzTmS2eSbnroiyTtm9lT4ldgm/6z+9sLTPoLDPnSraTk2u5oSdo0s7sfdwATwLPXvgBTPQz4G0ADePSIV2A6j4hh4N4j3oHZPCLqwJVHtAg5D2IRNeDCI8JOxFhEFTjxiA6wnEdEBTiKRTTziCgDh7GhspT1zFKazWbWlrQgac+XRrMGdA0wDqS6QEFBEp/yS6NBq8E1tgAAAABJRU5ErkJggg==')"
431 | 			this.sortLeftBtn[this.i].style.backgroundSize = '18px 18px'
432 | 			this.sortLeftBtn[this.i].style.backgroundRepeat = 'no-repeat'
433 | 			this.sortLeftBtn[this.i].style.backgroundPosition = 'left bottom'
434 | 			this.sortLeftBtn[this.i].innerHTML = ''
435 | 			this.sortLeftBtn[this.i].title = '左移'
436 | 			this.imageDelete[this.i].appendChild(this.sortLeftBtn[this.i])
437 | 
438 | 			this.sortRightBtn[this.i] = document.createElement('span')
439 | 			this.sortRightBtn[this.i].className = 'cupload-sort-right'
440 | 			this.sortRightBtn[this.i].style.position = 'absolute'
441 | 			this.sortRightBtn[this.i].style.bottom = 0
442 | 			this.sortRightBtn[this.i].style.right = 0
443 | 			this.sortRightBtn[this.i].style.margin = 0
444 | 			this.sortRightBtn[this.i].style.padding = 0
445 | 			this.sortRightBtn[this.i].style.fontSize = '18px'
446 | 			this.sortRightBtn[this.i].style.width = '24px'
447 | 			this.sortRightBtn[this.i].style.height = '24px'
448 | 			this.sortRightBtn[this.i].style.cursor = 'pointer'
449 | 			this.sortRightBtn[this.i].style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAA4UlEQVRYhe3WMUpDQRCA4XkKWlhIqnQWwc4iKbyBTVohJ/AC2lh4gxxBA7lAqhwgvbWtpYWVnVgI4mfhghKeEPCFSeD93cIu8w+7OzMRLS3bDga4Qy9LYOqbZ5xkCBzjqUi84DRD4giPReIVZxkSXTwUiTcMMyQ6uC8S7xhlSBxgUSQ+cJEhsY95kfjEVYbEHmZ+GNftq2oOHkbETkMeuxExiYjzsh5XVXXz525cWz+Xv2MuZ6qhzFdms66gSVZ9hOsKnvcNZRYimaVYZjOS2Y5lDyQ2YCTr41bWUNrS8l++ABQQn/PCTE8cAAAAAElFTkSuQmCC')"
450 | 			this.sortRightBtn[this.i].style.backgroundSize = '18px 18px'
451 | 			this.sortRightBtn[this.i].style.backgroundRepeat = 'no-repeat'
452 | 			this.sortRightBtn[this.i].style.backgroundPosition = 'right bottom'
453 | 			this.sortRightBtn[this.i].innerHTML = ''
454 | 			this.sortRightBtn[this.i].title = '右移'
455 | 			this.imageDelete[this.i].appendChild(this.sortRightBtn[this.i])
456 | 			var _this = this
457 | 			for (var m = 0; m <= this.i; m++) {
458 | 				this.sortLeftBtn[m].onclick = function(n) {
459 | 					return function() {
460 | 						_this.sortLeft(event, n)
461 | 					}
462 | 				}(m)
463 | 
464 | 				this.sortRightBtn[m].onclick = function(n) {
465 | 					return function() {
466 | 						_this.sortRight(event, n)
467 | 					}
468 | 				}(m)
469 | 			}
470 | 		},
471 | 
472 | 		//设置默认图片
473 | 		setDefaultImage: function() {
474 | 			this.imageBox[this.i].style.backgroundColor = "#B2B2B2"
475 | 			this.imageDelete[this.i].title = '图片不存在'
476 | 			this.imagePreview[this.i].src = 'data:image/png;base64,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'
477 | 			if (130 / this.opt.width > 105 / this.opt.height) {
478 | 				this.imagePreview[this.i].style.width = this.opt.width - 2 + 'px'
479 | 				this.imagePreview[this.i].style.height = 105 / (130 / this.opt.width) - 2 + 'px'
480 | 			} else {
481 | 				this.imagePreview[this.i].style.width = 130 / (105 / this.opt.height) - 2 + 'px'
482 | 				this.imagePreview[this.i].style.height = this.opt.height - 2 + 'px'
483 | 			}
484 | 		},
485 | 
486 | 		//设置图片宽高
487 | 		setImageAttribute: function(width, height) {
488 | 			if (width / this.opt.width > height / this.opt.height) {
489 | 				this.imagePreview[this.i].style.width = this.opt.width - 2 + 'px'
490 | 				this.imagePreview[this.i].style.height = height / (width / this.opt.width) - 2 + 'px'
491 | 			} else {
492 | 				this.imagePreview[this.i].style.width = width / (height / this.opt.height) - 2 + 'px'
493 | 				this.imagePreview[this.i].style.height = this.opt.height - 2 + 'px'
494 | 			}
495 | 		},
496 | 
497 | 		//data图片预览
498 | 		showImagePreview: function() {
499 | 			var obj = this.opt.data
500 | 			if (obj.length >= this.opt.num) {
501 | 				this.removeUploadBox()
502 | 			}
503 | 			var _this = this
504 | 			var tempImage = new Image()
505 | 			tempImage.src = obj[this.i]
506 | 			tempImage.onload = function() {
507 | 				_this.createImageBox(obj[_this.i], obj[_this.i], this.width, this.height)
508 | 				setTimeout(function() {
509 | 					if (obj[_this.i]) {
510 | 						_this.showImagePreview()
511 | 					}
512 | 				}, 0);
513 | 			}
514 | 			tempImage.onerror = function() {
515 | 				_this.createImageBox(obj[_this.i], obj[_this.i], 0, 0, false)
516 | 				setTimeout(function() {
517 | 					if (obj[_this.i]) {
518 | 						_this.showImagePreview()
519 | 					}
520 | 				}, 0);
521 | 			}
522 | 		},
523 | 
524 | 		//图片放大预览
525 | 		zoomInImage: function(n) {
526 | 			if(event.target.classList[0] === 'cupload-delete-btn' || event.target.classList[0] === 'cupload-sort-right' || event.target.classList[0] === 'cupload-sort-left') {
527 | 				return;
528 | 			}
529 | 			if(this.imagePreview[n].src == 'data:image/png;base64,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') {
530 | 				alert('图片不存在')
531 | 				return;
532 | 			}
533 | 			this.zommImage = document.createElement('img')
534 | 			this.zommImage.style.display = "inline-block"
535 | 			this.zommImage.style.verticalAlign = "middle"
536 | 			this.zommImage.src = this.imageArr[n]
537 | 			if (this.widthArr[n] / window.innerWidth > this.heightArr[n] / window.innerHeight) {
538 | 				this.zommImage.style.width = 0.8 * window.innerWidth + 'px'
539 | 				this.zommImage.style.height = 0.8 * this.heightArr[n] / (this.widthArr[n] / window.innerWidth) + 'px'
540 | 			} else {
541 | 				this.zommImage.style.width = 0.8 * this.widthArr[n] / (this.heightArr[n] / window.innerHeight) + 'px'
542 | 				this.zommImage.style.height = 0.8 * window.innerHeight + 'px'
543 | 			}
544 | 			this.overlay.appendChild(this.zommImage)
545 | 			this.overlay.style.lineHeight = window.innerHeight + 'px'
546 | 			this.overlay.style.cursor = "zoom-out"
547 | 			this.overlay.style.display = "block"
548 | 		},
549 | 
550 | 		//关闭图片放大预览
551 | 		zoomOutImage: function() {
552 | 			this.overlay.style.display = "none"
553 | 			this.zommImage.remove()
554 | 		},
555 | 
556 | 		//检测当前图片数量，判断是否创建上传框
557 | 		isCreateUploadBox: function() {
558 | 			this.removeUploadBox()
559 | 			if (this.imageList.children.length < this.opt.num) {
560 | 				this.createUploadBox()
561 | 			}
562 | 		},
563 | 
564 | 		//删除图片
565 | 		deleteImage: function(n) {
566 | 			this.imageBox[n].remove()
567 | 			this.removeUploadBox()
568 | 			if (this.imageList.children.length < this.opt.num) {
569 | 				this.createUploadBox()
570 | 			}
571 | 			if(this.opt.deleteUrl) {
572 | 				var xhr = null;
573 | 				var key = this.opt.name
574 | 				var data = {}
575 | 				data[key] = this.imageArr[n]
576 | 				data['id'] = n
577 | 			    if(window.XMLHttpRequest){
578 | 			        xhr = new XMLHttpRequest()
579 | 			    } else {
580 | 			        xhr = new ActiveXObject('Microsoft.XMLHTTP')
581 | 			    }
582 | 			    if(typeof data == 'object'){
583 | 			        var str = '';
584 | 			        for(var key in data){
585 | 			            str += key+'='+data[key]+'&';
586 | 			        }
587 | 			        data = str.replace(/&$/, '');
588 | 			    }
589 | 		        xhr.open('POST', this.opt.deleteUrl, true);
590 | 		        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
591 | 		        xhr.send(data);
592 | 			    xhr.onreadystatechange = function(){
593 | 			        if(xhr.readyState == 4){
594 | 			            if(xhr.status == 200){
595 | 			               console.log(xhr.response)
596 | 			            } else {
597 | 		                    alert(((xhr.responseText).split("</p>")[0]).split("<p>")[1])
598 | 		                    return false
599 | 			            }
600 | 			        }
601 | 			    }
602 | 			}
603 | 		},
604 | 
605 | 		sortLeft: function(event, n) {
606 | 			if(this.imageBox[n].previousSibling) {
607 | 				this.imageList.insertBefore(this.imageBox[n], this.imageBox[n].previousSibling)
608 | 			}
609 | 		},
610 | 
611 | 		sortRight: function(event, n) {
612 | 			if(this.imageBox[n].nextSibling) {
613 | 				this.imageList.insertBefore(this.imageBox[n].nextSibling, this.imageBox[n])
614 | 			}
615 | 		},
616 | 
617 | 		//移除上传框
618 | 		removeUploadBox: function() {
619 | 			this.uploadBox.remove()
620 | 		},
621 | 
622 | 		//显示图片删除
623 | 		showImageDelete: function(m) {
624 | 			this.imageDelete[m].style.opacity = 1
625 | 		},
626 | 
627 | 		//隐藏图片删除
628 | 		hideImageDelete: function(m) {
629 | 			this.imageDelete[m].style.opacity = 0
630 | 		},
631 | 	}
632 | 
633 | 	window.Cupload = Cupload;
634 | })(window, document)
635 | 


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