网站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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