imgPlugin.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. ;(function($) {
  2. var imageNum = 5;
  3. if ($("#maxImageNum").val() != null) {
  4. imageNum = $("#maxImageNum").val();
  5. }
  6. var delParent;
  7. $.fn.extend({
  8. takungaeImgup : function(opt, serverCallBack) {
  9. if (typeof opt != "object") {
  10. alert('参数错误!');
  11. return;
  12. }
  13. var $fileInput = $(this);
  14. var $fileInputId = $fileInput.attr('id');
  15. var defaults = {
  16. fileType : [ "jpg", "png", "bmp", "jpeg","JPG","PNG","JPEG","BMP" ], // 上传文件的类型
  17. fileSize : 1024 * 1024 * 10, // 上传文件的大小 10M
  18. count : 0
  19. // 计数器
  20. };
  21. // 组装参数;
  22. if (opt.success) {
  23. var successCallBack = opt.success;
  24. delete opt.success;
  25. }
  26. if (opt.error) {
  27. var errorCallBack = opt.error;
  28. delete opt.error;
  29. }
  30. /* 点击图片的文本框 */
  31. $(this).change(function() {
  32. var reader = new FileReader(); // 新建一个FileReader();
  33. var idFile = $(this).attr("id");
  34. var file = document.getElementById(idFile);
  35. var imgContainer = $(this).parents(".z_photo"); // 存放图片的父亲元素
  36. var fileList = file.files; // 获取的图片文件
  37. var input = $(this).parent();// 文本框的父亲元素
  38. var imgArr = [];
  39. // 遍历得到的图片文件
  40. var numUp = imgContainer.find(".up-section").length;
  41. var totalNum = numUp + fileList.length; // 总的数量
  42. if (fileList.length > imageNum|| totalNum > imageNum) {
  43. alert("上传图片数目不可以超过5个,请重新选择"); // 一次选择上传超过5个
  44. // 或者是已经上传和这次上传的到的总数也不可以超过5个
  45. } else if (numUp < imageNum) {
  46. fileList = validateUp(fileList,defaults);
  47. for ( var i = 0; i < fileList.length; i++) {
  48. var imgUrl = window.URL.createObjectURL(fileList[i]);
  49. imgArr.push(imgUrl);
  50. var $section = $("<section class='up-section fl loading'>");
  51. imgContainer.children(".z_file").before($section);
  52. var $span = $("<span class='up-span'>");
  53. $span.appendTo($section);
  54. var $img0 = $("<img class='close-upimg'>").on("click",function(event){
  55. event.preventDefault();
  56. event.stopPropagation();
  57. $(".works-mask").show();
  58. delParent = $(this).parent();
  59. });
  60. $img0.attr("src","img/a7.png").appendTo($section);
  61. var $img = $("<img class='up-img up-opcity'>");
  62. $img.attr("src", imgArr[i]);
  63. $img.appendTo($section);
  64. var $p = $("<p class='img-name-p'>");
  65. $p.html(fileList[i].name).appendTo($section);
  66. var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
  67. $input.appendTo($section);
  68. var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
  69. $input2.appendTo($section);
  70. uploadImg(opt, fileList[i],$section);
  71. }
  72. ;
  73. }
  74. numUp = imgContainer.find(".up-section").length;
  75. if (numUp >= imageNum) {
  76. $(this).parent().hide();
  77. }
  78. ;
  79. //input内容清空
  80. $(this).val("");
  81. });
  82. $(".z_photo").delegate(".close-upimg", "click", function(event) {
  83. event.preventDefault();
  84. event.stopPropagation();
  85. $(".works-mask").show();
  86. delParent = $(this).parent();
  87. console.log(delParent.html()+"delegzat=======");
  88. });
  89. $(".wsdel-ok").click(function(event) {
  90. event.preventDefault();
  91. event.stopPropagation();
  92. $(".works-mask").hide();
  93. var numUp = delParent.siblings(".up-section").length;
  94. if (numUp < imageNum + 1) {
  95. delParent.parent().find(".z_file").show();
  96. }
  97. delParent.remove();
  98. });
  99. $(".wsdel-no").click(function() {
  100. $(".works-mask").hide();
  101. });
  102. // 验证文件的合法性
  103. function validateUp(files, defaults) {
  104. var arrFiles = [];// 替换的文件数组
  105. for ( var i = 0, file; file = files[i]; i++) {
  106. // 获取文件上传的后缀名
  107. var newStr = file.name.split("").reverse().join("");
  108. if (newStr.split(".")[0] != null) {
  109. var type = newStr.split(".")[0].split("")
  110. .reverse().join("");
  111. console.log(type + "===type===");
  112. if (jQuery.inArray(type, defaults.fileType) > -1) {
  113. // 类型符合,可以上传
  114. if (file.size >= defaults.fileSize) {
  115. alert('文件大小"' + file.name + '"超出10M限制!');
  116. } else {
  117. arrFiles.push(file);
  118. }
  119. } else {
  120. alert('您上传的"' + file.name + '"不符合上传类型');
  121. }
  122. } else {
  123. alert('您上传的"' + file.name + '"无法识别类型');
  124. }
  125. }
  126. return arrFiles;
  127. }
  128. ;
  129. function uploadImg(opt, file, obj) {
  130. $("#imguploadFinish").val(false);
  131. // 验证通过图片异步上传
  132. var url = opt.url;
  133. var data = new FormData();
  134. data.append("path", opt.formData.path);
  135. data.append("file", file);
  136. $.ajax({
  137. type : 'POST',
  138. url : url,
  139. data : data,
  140. processData : false,
  141. contentType : false,
  142. dataType : 'json',
  143. success : function(data) {
  144. console.log("chenggong");
  145. // obj.remove();
  146. // 上传成功
  147. if (data.error == 0) {
  148. $(".up-section").removeClass("loading");
  149. $(".up-img").removeClass(
  150. "up-opcity");
  151. $("#imguploadFinish").val(true);
  152. var htmlStr = "<input type='text' style='display:none;' name='"
  153. + opt.formData.name
  154. + "' value='"
  155. + data.url
  156. + "'>";
  157. obj.append(htmlStr);
  158. if (successCallBack) {
  159. successCallBack(data);
  160. }
  161. }
  162. if (data.error == 1) {
  163. obj.remove();
  164. $("#imguploadFinish").val(false);
  165. if (errorCallBack) {
  166. errorCallBack(data.url);
  167. }
  168. }
  169. },
  170. error : function(e) {
  171. obj.remove();
  172. var err = "上传失败,请联系管理员!";
  173. $("#imguploadFinish").val(false);
  174. if (errorCallBack) {
  175. errorCallBack(err);
  176. }
  177. }
  178. });
  179. }
  180. }
  181. });
  182. })(jQuery);