ms.upload.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. /**
  2. * 上传js
  3. * 官方插件文档:https://www.plupload.com
  4. * 参数方法文档:https://www.cnblogs.com/2050/p/3913184.html
  5. */
  6. (function() {
  7. // 默认支持上传的文件类型
  8. var mimeTypes = {
  9. "image": {
  10. title: "Image files",
  11. extensions: "jpg,JPG,jpeg,PNG,gif,png"
  12. },
  13. "file": {
  14. title: "Zip files",
  15. extensions: "ZIP,zip,DOC,doc,docx,xls,XLS,xlsx,RAR,rar"
  16. },
  17. "video": {
  18. title: "video files",
  19. extensions: "MP3,MP4"
  20. },
  21. "all": {
  22. title: "all files",
  23. extensions: "jpg,JPG,jpeg,PNG,gif,png,ZIP,zip,DOC,doc,docx,xls,XLS,xlsx,RAR,rar"
  24. }
  25. };
  26. /**
  27. * 文件上传
  28. * id: id属性
  29. * {
  30. * url:"", //(可选)默认ms.base + "/file/upload.do"
  31. * mime_types:"image", //(可选)默认图片,支持image、file、video、all(表示包含前三种),也可以设置allowedFile参数覆盖
  32. * allowedFile:""//(可选)自定义上传文件后缀例如:jpg,gif
  33. * max_file_size:"1mb", //(可选)默认1mb,单位kb,mb,gb,tb,注意后端ms.properties文件也有配置上传大小,优先上传控件大小
  34. * multi_selection:false, //(可选)默认单文件
  35. * uploadPath:"", //(可选)默认上传upload文件夹下面(如果非upload,需要设置uploadFloderPath参数)对应的站点下面,例如uload/1/xxxxx.jpg
  36. * uploadFloderPath:"", //(可选)自定义上传文件夹路径,最终文件路径格式 uploadFloderPath/uploadPath/xxxxxx.jpg,注意这里的uploadPath已经没有了upload文件夹与站点id
  37. * diyPath:"", //(可选)自定义上传文件夹路径,可以定义盘符路径
  38. * isRename:true,//(可选)文件重命名,默认根据时间命名
  39. * fileFiltered:function //每次选择一个文件都会触发
  40. * filesAdded:function //每次选择好文件后都会触发
  41. * beforeUpload:function //上传文件之前触发,确认上传 业务的情况下有用
  42. * uploadProgress:function //处理进度条
  43. * fileUploaded:function //(必填)上传成功返回,主要会用到第三个参数的response,这个值是上传成功后返回的数据
  44. * }
  45. */
  46. function upload(id, cfg) {
  47. var uploadCfg = {
  48. url: basePath+"/file/upload.do",
  49. mime_types: mimeTypes["image"],
  50. max_file_size: "1mb",
  51. multi_selection: false,
  52. uploadPath: "",
  53. diyPath:"",
  54. uploadFloderPath: "",
  55. chunk: "",
  56. chunks: "",
  57. prevent_duplicates: true,
  58. isRename: true,
  59. fileFiltered: function(uploader, file) {},
  60. filesAdded: function(uploader, files) {},
  61. beforeUpload: function(uploader, file) {},
  62. uploadProgress: function(uploader, file) {},
  63. fileUploaded: function(uploader, file, responseObject) {},
  64. error: function(uploader, errObject) {
  65. if (errObject.code == -600) {
  66. $('.ms-notifications').offset({top:43}).notify({
  67. type:'warning',
  68. message: { text:errObject.file.name + "文件超过" +
  69. uploadCfg.max_file_size + "大小" }
  70. }).show();
  71. } else if (errObject.code == -601) {
  72. $('.ms-notifications').offset({top:43}).notify({
  73. type:'warning',
  74. message: { text:errObject.file.name + "格式错误" }
  75. }).show();
  76. } else if (errObject.code == -700) {
  77. $('.ms-notifications').offset({top:43}).notify({
  78. type:'warning',
  79. message: { text:errObject.file.name + "格式错误"}
  80. }).show();
  81. } else if (errObject.code == -300) {
  82. $('.ms-notifications').offset({top:43}).notify({
  83. type:'warning',
  84. message: { text:errObject.file.name + "发生磁盘读写错误时的错误代码,例如本地上某个文件不可读"}
  85. }).show();
  86. } else if (errObject.code == -602) {
  87. $('.ms-notifications').offset({top:43}).notify({
  88. type:'warning',
  89. message: { text:errObject.file.name + "文件已上传过,不能重复上传。"}
  90. }).show();
  91. } else if (errObject.code == -702) {
  92. $('.ms-notifications').offset({top:43}).notify({
  93. type:'warning',
  94. message: { text:errObject.file.name + "文件网页上传不支持,太大的文件请通过其他途径上传。"}
  95. }).show();
  96. } else {
  97. $('.ms-notifications').offset({top:43}).notify({
  98. type:'warning',
  99. message: { text:errObject.code + errObject.file.name}
  100. }).show();
  101. }
  102. },
  103. };
  104. var multipart_params = {}; // 上传表单参数
  105. multipart_params.maxSize = calculationMaxSize();
  106. multipart_params.allowedFile = uploadCfg.mime_types.extensions;
  107. // 判断cfg是否为json格式,不是则将默认参数传给cfg
  108. if (cfg != undefined && validator.isJSON(JSON.stringify(cfg))) {
  109. // 重新定义后台上传路径
  110. if (cfg.url != undefined && cfg.url != "") {
  111. uploadCfg.url = cfg.url;
  112. }
  113. // 允许上传的后缀
  114. if (cfg.allowedFile != undefined && cfg.allowedFile != "") {
  115. uploadCfg.mime_types =
  116. {
  117. title: "all files",
  118. extensions: cfg.allowedFile
  119. };
  120. multipart_params.allowedFile = cfg.allowedFile;
  121. }
  122. //组织后台需要的参数
  123. if (cfg.max_file_size != undefined && cfg.max_file_size != "") {
  124. uploadCfg.max_file_size = cfg.max_file_size;
  125. multipart_params.maxSize = calculationMaxSize();
  126. }
  127. if (cfg.path != undefined && cfg.path != "") {
  128. uploadCfg.uploadPath = cfg.path;
  129. multipart_params.uploadPath = cfg.path;
  130. }
  131. if (cfg.diyPath != undefined && cfg.diyPath != "") {
  132. uploadCfg.diyPath = cfg.diyPath;
  133. multipart_params.diyPath = cfg.diyPath;
  134. }
  135. if (cfg.uploadFloderPath != undefined && cfg.uploadFloderPath != "") {
  136. uploadCfg.uploadFloderPath = cfg.uploadFloderPath;
  137. multipart_params.uploadFloderPath = cfg.uploadFloderPath;
  138. }
  139. if (cfg.chunk != undefined && cfg.chunk != "") {
  140. multipart_params.chunk = cfg.chunk;
  141. }
  142. if (cfg.chunks != undefined && cfg.chunks != "") {
  143. multipart_params.chunks = cfg.chunks;
  144. }
  145. if (cfg.name != undefined && cfg.name != "") {
  146. multipart_params.name = cfg.name;
  147. }
  148. if (cfg.isRename != undefined) {
  149. multipart_params.isRename = cfg.isRename;
  150. }
  151. if (cfg.multi_selection != undefined ) {
  152. uploadCfg.multi_selection = cfg.multi_selection;
  153. }
  154. if (cfg.prevent_duplicates != undefined) {
  155. uploadCfg.prevent_duplicates = cfg.prevent_duplicates;
  156. }
  157. //回调事件
  158. if (cfg.fileUploaded != undefined && cfg.fileUploaded != "") {
  159. uploadCfg.fileUploaded = cfg.fileUploaded;
  160. }
  161. if (cfg.filesAdded != undefined && cfg.filesAdded != "") {
  162. uploadCfg.filesAdded = cfg.filesAdded;
  163. }
  164. if (cfg.fileFiltered != undefined && cfg.fileFiltered != "") {
  165. uploadCfg.fileFiltered = cfg.fileFiltered;
  166. }
  167. if (cfg.beforeUpload != undefined && cfg.beforeUpload != "") {
  168. uploadCfg.beforeUpload = cfg.beforeUpload;
  169. }
  170. if (cfg.uploadProgress != undefined && cfg.uploadProgress != "") {
  171. uploadCfg.uploadProgress = cfg.uploadProgress;
  172. }
  173. if (cfg.error != undefined && cfg.error != "") {
  174. uploadCfg.error = cfg.error;
  175. }
  176. }
  177. // 实例化一个plupload上传对象
  178. var uploader = new plupload.Uploader({
  179. browse_button: id, // 预览按钮元素
  180. url: uploadCfg.url, // 上传地址
  181. flash_swf_url: 'js/Moxie.swf',
  182. silverlight_xap_url: 'js/Moxie.xap',
  183. multi_selection: uploadCfg.multi_selection, // 禁止浏览框多选
  184. multipart_params: multipart_params,
  185. filters: { // 文件类型 大小设置,对不同场景的文件上传配置此参数
  186. mime_types: [uploadCfg.mime_types],
  187. max_file_size: uploadCfg.max_file_size, // 最大只能上传400kb的文件
  188. prevent_duplicates: uploadCfg.prevent_duplicates //布尔类型
  189. // 不允许选取重复文件
  190. },
  191. });
  192. uploader.init();
  193. /**
  194. * 选择了多少文件就会触发多少次
  195. *uploader为当前的plupload实例对象,file为触发此事件的文件对象
  196. */
  197. uploader.bind('FileFiltered', function(uploader, file) {
  198. eval(uploadCfg.fileFiltered(uploader, file));
  199. });
  200. /**
  201. * 当文件添加到上传队列后触发
  202. * uploader为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象
  203. * 每一次选择文件都会触发,不管选择多个文件还是单个文件都只会触发一次
  204. */
  205. uploader.bind('FilesAdded', function(uploader, files) {
  206. eval(uploadCfg.filesAdded(uploader, files));
  207. });
  208. /**
  209. * 当队列中的某一个文件正要开始上传前触发
  210. * uploader为当前的plupload实例对象,file为触发此事件的文件对象
  211. */
  212. uploader.bind('BeforeUpload', function(uploader, file) {
  213. eval(uploadCfg.beforeUpload(uploader, file));
  214. });
  215. /**
  216. * 会在文件上传过程中不断触发,可以用此事件来显示上传进度
  217. * uploader为当前的plupload实例对象,file为触发此事件的文件对象
  218. */
  219. uploader.bind('UploadProgress', function(uploader, file) {
  220. eval(uploadCfg.uploadProgress(uploader, file));
  221. });
  222. /**
  223. * 当队列中的某一个文件上传完成后触发监听函数参数:(uploader,file,responseObject)
  224. * uploader为当前的plupload实例对象,
  225. * file为触发此事件的文件对象,
  226. * responseObject为服务器返回的信息对象,它有以下3个属性:
  227. * response:服务器返回的文本
  228. * responseHeaders:服务器返回的头信息
  229. * status:服务器返回的http状态码,比如200
  230. */
  231. uploader.bind('FileUploaded', function(uploader, file, responseObject) {
  232. eval(uploadCfg.fileUploaded(uploader, file, responseObject));
  233. });
  234. /**
  235. * 当发生错误时触发监听函数参数:(uploader,errObject)
  236. * uploader为当前的plupload实例对象,
  237. * errObject为错误对象,它至少包含以下3个属性(因为不同类型的错误,属性可能会不同):
  238. * code:错误代码,具体请参考plupload上定义的表示错误代码的常量属性
  239. * file:与该错误相关的文件对象
  240. * message:错误信息
  241. */
  242. uploader.bind('Error', function(uploader, errObject) {
  243. eval(uploadCfg.error(uploader, errObject));
  244. });
  245. /**
  246. * 计算后台的上传大小,因为前端上传空间与后端的大小单位不一致
  247. */
  248. function calculationMaxSize() {
  249. var size = parseInt(uploadCfg.max_file_size);
  250. if (uploadCfg.max_file_size.indexOf("kb") > -1) {
  251. return parseInt(size) / 1024;
  252. } else if (uploadCfg.max_file_size.indexOf("mb") > -1) {
  253. return size;
  254. } else if (uploadCfg.max_file_size.indexOf("gb") > -1) {
  255. return size * 1024;
  256. } else if (uploadCfg.max_file_size.indexOf("tb") > -1) {
  257. return size * 1024 * 1024;
  258. }
  259. }
  260. return uploader;
  261. }
  262. if (ms == undefined) {
  263. ms = {};
  264. }
  265. window.ms.upload = upload;
  266. }());