uploadImg.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. var imgSrc = []; //图片路径
  2. var imgFile = []; //文件流
  3. var imgName = []; //图片名字
  4. //选择图片
  5. function imgUpload(obj) {
  6. var oInput = '#' + obj.inputId;
  7. var imgBox = '#' + obj.imgBox;
  8. var btn = '#' + obj.buttonId;
  9. $(oInput).on("change", function() {
  10. var fileImg = $(oInput)[0];
  11. var fileList = fileImg.files;
  12. var fileSize = fileImg.files[0].size;
  13. var size = fileSize / 1024;
  14. var name = fileImg.files[0].name;
  15. var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
  16. console.log(fileSize)
  17. console.log(fileName)
  18. if(size > 3000 || (fileName !="jpg" && fileName !="png")){
  19. $.alert('请上传不超过3M的.jpg或.png的图片文件。')
  20. return
  21. }
  22. for(var i = 0; i < fileList.length; i++) {
  23. var imgSrcI = getObjectURL(fileList[i]);
  24. imgName.push(fileList[i].name);
  25. imgSrc.push(imgSrcI);
  26. imgFile.push(fileList[i]);
  27. }
  28. addNewContent(imgBox);
  29. if( $(".imgContainer").length > 2){
  30. $("#inputBox").hide();
  31. }
  32. })
  33. $(btn).on('click', function() {
  34. //用formDate对象上传
  35. var fd = new FormData($('#upBox')[0]);
  36. for(var i=0;i<imgFile.length;i++){
  37. fd.append(obj.data+"[]",imgFile[i]);
  38. }
  39. submitPicture(obj.upUrl, fd);
  40. })
  41. }
  42. //图片展示
  43. function addNewContent(obj) {
  44. $(imgBox).html("");
  45. for(var a = 0; a < imgSrc.length; a++) {
  46. var oldBox = $(obj).html();
  47. $(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">x</p></div>');
  48. }
  49. }
  50. //删除
  51. function removeImg(obj, index) {
  52. imgSrc.splice(index, 1);
  53. imgFile.splice(index, 1);
  54. imgName.splice(index, 1);
  55. var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
  56. addNewContent(boxId);
  57. if( $(".imgContainer").length < 3){
  58. $("#inputBox").show();
  59. }
  60. $("#file").val("");
  61. }
  62. //限制图片个数
  63. function limitNum(num){
  64. if(!num){
  65. return true;
  66. }else if(imgFile.length>num){
  67. return false;
  68. }else{
  69. return true;
  70. }
  71. }
  72. //上传(将文件流数组传到后台)
  73. function submitPicture(url,data) {
  74. for (var p of data) {
  75. console.log(p);
  76. }
  77. if(url&&data){
  78. $.ajax({
  79. type: "post",
  80. url: url,
  81. async: true,
  82. data: data,
  83. processData: false,
  84. contentType: false,
  85. success: function(dat) {
  86. console.log(dat);
  87. }
  88. });
  89. }else{
  90. alert('请打开控制台查看传递参数!');
  91. }
  92. }
  93. //图片灯箱
  94. function imgDisplay(obj) {
  95. var src = $(obj).attr("src");
  96. var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
  97. $('body').append(imgHtml);
  98. }
  99. //关闭
  100. function closePicture(obj) {
  101. $(obj).parent("div").remove();
  102. }
  103. //图片预览路径
  104. function getObjectURL(file) {
  105. var url = null;
  106. if(window.createObjectURL != undefined) { // basic
  107. url = window.createObjectURL(file);
  108. } else if(window.URL != undefined) { // mozilla(firefox)
  109. url = window.URL.createObjectURL(file);
  110. } else if(window.webkitURL != undefined) { // webkit or chrome
  111. url = window.webkitURL.createObjectURL(file);
  112. }
  113. return url;
  114. }