imgUp.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. $(function(){
  2. var delParent;
  3. var defaults = {
  4. fileType : ["jpg","png","bmp","jpeg"], // 上传文件的类型
  5. fileSize : 1024 * 1024 * 10 // 上传文件的大小 10M
  6. };
  7. /*点击图片的文本框*/
  8. $(".file").change(function(){
  9. var idFile = $(this).attr("id");
  10. var file = document.getElementById(idFile);
  11. var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
  12. var fileList = file.files; //获取的图片文件
  13. var input = $(this).parent();//文本框的父亲元素
  14. var imgArr = [];
  15. //遍历得到的图片文件
  16. var numUp = imgContainer.find(".up-section").length;
  17. var totalNum = numUp + fileList.length; //总的数量
  18. if(fileList.length > 6 || totalNum > 6 ){
  19. alert("上传图片数目不可以超过12个,请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
  20. }
  21. else if(numUp < 6){
  22. fileList = validateUp(fileList);
  23. for(var i = 0;i<fileList.length;i++){
  24. var imgUrl = window.URL.createObjectURL(fileList[i]);
  25. imgArr.push(imgUrl);
  26. var $section = $("<section class='up-section fl loading'>");
  27. imgContainer.prepend($section);
  28. var $span = $("<span class='up-span'>");
  29. $span.appendTo($section);
  30. var $img0 = $("<img class='close-upimg'>").on("click",function(event){
  31. event.preventDefault();
  32. event.stopPropagation();
  33. $(".works-mask").show();
  34. delParent = $(this).parent();
  35. });
  36. $img0.attr("src","img/a7.png").appendTo($section);
  37. var $img = $("<img class='up-img up-opcity'>");
  38. $img.attr("src",imgArr[i]);
  39. $img.appendTo($section);
  40. var $p = $("<p class='img-name-p'>");
  41. $p.html(fileList[i].name).appendTo($section);
  42. var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
  43. $input.appendTo($section);
  44. var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
  45. $input2.appendTo($section);
  46. }
  47. }
  48. setTimeout(function(){
  49. $(".up-section").removeClass("loading");
  50. $(".up-img").removeClass("up-opcity");
  51. },450);
  52. numUp = imgContainer.find(".up-section").length;
  53. if(numUp >= 6){
  54. $(this).parent().hide();
  55. }
  56. });
  57. $(".z_photo").delegate(".close-upimg","click",function(){
  58. $(".works-mask").show();
  59. delParent = $(this).parent();
  60. });
  61. $(".wsdel-ok").click(function(){
  62. $(".works-mask").hide();
  63. var numUp = delParent.siblings().length;
  64. if(numUp < 7){
  65. delParent.parent().find(".z_file").show();
  66. }
  67. delParent.remove();
  68. });
  69. $(".wsdel-no").click(function(){
  70. $(".works-mask").hide();
  71. });
  72. function validateUp(files){
  73. var arrFiles = [];//替换的文件数组
  74. for(var i = 0, file; file = files[i]; i++){
  75. //获取文件上传的后缀名
  76. var newStr = file.name.split("").reverse().join("");
  77. if(newStr.split(".")[0] != null){
  78. var type = newStr.split(".")[0].split("").reverse().join("");
  79. console.log(type+"===type===");
  80. if(jQuery.inArray(type, defaults.fileType) > -1){
  81. // 类型符合,可以上传
  82. if (file.size >= defaults.fileSize) {
  83. alert(file.size);
  84. alert('您这个"'+ file.name +'"文件大小过大');
  85. } else {
  86. // 在这里需要判断当前所有文件中
  87. arrFiles.push(file);
  88. }
  89. }else{
  90. alert('您这个"'+ file.name +'"上传类型不符合');
  91. }
  92. }else{
  93. alert('您这个"'+ file.name +'"没有类型, 无法识别');
  94. }
  95. }
  96. return arrFiles;
  97. }
  98. })
  99. function xpT(x){
  100. var li=$("#tit li");
  101. var xiaoBox=$("#logBox .smallB");
  102. for (var j=0; j<xiaoBox.length; j++){
  103. xiaoBox[j].style.display="none";
  104. li[j].style.color=" #cccccc";
  105. li[j].style="border-bottom:1px solid #cccccc; color:#ccc;";
  106. }
  107. xiaoBox[x].style.display="block";
  108. li[x].style.color="#0165bb";
  109. li[x].style="border-bottom:2px solid #0165bb; color:#0165bb;";
  110. }