upload.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. define(['md5'], function (SparkMD5, allowMime) {
  2. allowMime = JSON.parse('{$exts|raw}');
  3. return function (element, callable, option) {
  4. /*! 初始化变量 */
  5. option = {element: $(element), exts: [], mimes: [], files: {}, cache: {}, load: 0};
  6. option.count = {total: 0, uploaded: 0}, option.size = option.element.data('size') || 0;
  7. option.safe = option.element.data('safe') ? 1 : 0, option.hload = option.element.data('hide-load') ? 1 : 0;
  8. option.field = option.element.data('field') || 'file', option.input = $('[name="_field_"]'.replace('_field_', option.field));
  9. option.uptype = option.safe ? 'local' : option.element.attr('data-uptype') || '', option.multiple = option.element.data('multiple') > 0;
  10. /*! 文件选择筛选 */
  11. $((option.element.data('type') || '').split(',')).map(function (i, ext) {
  12. if (allowMime[ext]) option.exts.push(ext), option.mimes.push(allowMime[ext]);
  13. });
  14. /*! 初始化上传组件 */
  15. option.uploader = layui.upload.render({
  16. auto: false, elem: element, accept: 'file', multiple: option.multiple,
  17. exts: option.exts.join('|'), acceptMime: option.mimes.join(','), choose: function (object, index) {
  18. for (index in (option.files = object.pushFile())) {
  19. if (option.size > 0 && option.files[index].size > option.size) {
  20. return delete option.files[index], $.msg.tips('文件大小超出上传限制!');
  21. }
  22. option.load = option.hload || $.msg.loading('上传进度 <span data-upload-progress>0%</span>');
  23. option.count.total++, option.files[index].index = index, option.cache[index] = option.files[index], delete option.files[index];
  24. md5file(option.cache[index]).then(function (file) {
  25. option.element.triggerHandler('upload.hash', file);
  26. jQuery.ajax("{:url('admin/api.upload/state')}", {
  27. data: {xkey: file.xkey, uptype: option.uptype, safe: option.safe, name: file.name}, method: 'post', success: function (ret) {
  28. file.xurl = ret.data.url;
  29. if (parseInt(ret.code) === 404) {
  30. option.uploader.config.url = ret.data.server;
  31. option.uploader.config.data.key = ret.data.xkey;
  32. option.uploader.config.data.safe = ret.data.safe;
  33. option.uploader.config.data.uptype = ret.data.uptype;
  34. if (ret.data.uptype === 'qiniu') {
  35. option.uploader.config.data.token = ret.data.token;
  36. } else if (ret.data.uptype === 'alioss') {
  37. option.uploader.config.data.policy = ret.data.policy;
  38. option.uploader.config.data.signature = ret.data.signature;
  39. option.uploader.config.data.OSSAccessKeyId = ret.data.OSSAccessKeyId;
  40. option.uploader.config.data.success_action_status = 200;
  41. option.uploader.config.data['Content-Disposition'] = 'inline;filename=' + encodeURIComponent(file.name);
  42. } else if (ret.data.uptype === 'txcos') {
  43. option.uploader.config.data.policy = ret.data.policy;
  44. option.uploader.config.data['q-ak'] = ret.data['q-ak'];
  45. option.uploader.config.data['q-key-time'] = ret.data['q-key-time'];
  46. option.uploader.config.data['q-signature'] = ret.data['q-signature'];
  47. option.uploader.config.data['q-sign-algorithm'] = ret.data['q-sign-algorithm'];
  48. option.uploader.config.data.success_action_status = 200;
  49. option.uploader.config.data['Content-Disposition'] = 'inline;filename=' + encodeURIComponent(file.name);
  50. }
  51. object.upload(file.index, file);
  52. } else if (parseInt(ret.code) === 200) {
  53. option.uploader.config.done({uploaded: true, url: file.xurl}, file.index);
  54. } else {
  55. $.msg.tips(ret.info || ret.error.message || '文件上传出错!');
  56. }
  57. }
  58. });
  59. });
  60. }
  61. }, progress: function (number) {
  62. option.element.triggerHandler('upload.progress', {event: arguments[2], file: arguments[3]});
  63. $('[data-upload-progress]').html(number + '%');
  64. }, done: function (ret, index) {
  65. option.element.triggerHandler('upload.done', {file: option.cache[index], data: ret});
  66. if (++option.count.uploaded >= option.count.total && !option.hload) layer.close(option.load);
  67. if (typeof ret.code === 'number' && parseInt(ret.code) === 0) return $.msg.tips(ret.info || '文件上传失败!');
  68. if (typeof option.cache[index].xurl !== 'string') return $.msg.tips('无效的文件对象!');
  69. if (typeof ret.uploaded === 'undefined' && typeof option.cache[index].xurl === 'string') {
  70. ret = {uploaded: true, url: option.cache[index].xurl};
  71. }
  72. if (ret.uploaded) {
  73. if (typeof callable === 'function') {
  74. callable.call(option.element, ret.url, option.cache[index]);
  75. } else {
  76. option.input.val(ret.url).trigger('change');
  77. }
  78. } else {
  79. $.msg.tips(ret.info || ret.error.message || '文件上传出错!');
  80. }
  81. }, allDone: function () {
  82. option.element.triggerHandler('upload.complete', {});
  83. option.element.html(option.element.data('html'));
  84. option.hload || $.msg.close(option.load);
  85. }
  86. });
  87. };
  88. function md5file(file) {
  89. var deferred = jQuery.Deferred();
  90. file.xext = file.name.indexOf('.') > -1 ? file.name.split('.').pop() : 'tmp';
  91. /*! 兼容不能计算文件 HASH 的情况 */
  92. if (!window.FileReader) return jQuery.when((function (date, chars) {
  93. date = new Date(), chars = 'abcdefhijkmnprstwxyz0123456789';
  94. this.xmd5 = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDay() + date.getHours() + date.getMinutes() + date.getSeconds();
  95. while (this.xmd5.length < 32) this.xmd5 += chars.charAt(Math.floor(Math.random() * chars.length));
  96. return setFileXdata(file, this.xmd5), deferred.resolve(file, file.xmd5, file.xkey), deferred;
  97. }).call(this));
  98. /*! 读取文件并计算 HASH 值 */
  99. var spark = new SparkMD5.ArrayBuffer();
  100. var slice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  101. file.chunk_idx = 0, file.chunk_size = 2097152, file.chunk_total = Math.ceil(this.size / this.chunk_size);
  102. return jQuery.when(loadNextChunk(file));
  103. function setFileXdata(file, xmd5) {
  104. file.xmd5 = xmd5, file.xkey = file.xmd5.substr(0, 2) + '/' + file.xmd5.substr(2, 30) + '.' + file.xext;
  105. return delete file.chunk_idx, delete file.chunk_size, delete file.chunk_total, file;
  106. }
  107. function loadNextChunk(file) {
  108. this.reader = new FileReader();
  109. this.reader.onload = function (event) {
  110. spark.append(event.target.result);
  111. if (++file.chunk_idx < file.chunk_total) {
  112. loadNextChunk(file);
  113. } else {
  114. setFileXdata(file, spark.end());
  115. deferred.resolve(file, file.xmd5, file.xkey);
  116. }
  117. };
  118. this.reader.onerror = function () {
  119. deferred.reject();
  120. };
  121. this.start = file.chunk_idx * file.chunk_size;
  122. this.loaded = (this.start + file.chunk_size >= file.size) ? file.size : this.start + file.chunk_size;
  123. this.reader.readAsArrayBuffer(slice.call(file, this.start, this.loaded));
  124. return deferred.notify(file, (this.loaded / file.size * 100).toFixed(2)), deferred;
  125. }
  126. }
  127. });