Advertisement
Guest User

Untitled

a guest
Mar 27th, 2017
45
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.09 KB | None | 0 0
  1. <input id="bild" multiple="" name="bild" type="file">
  2.  
  3. $( "input#bild" ).change(function() {
  4.  
  5. console.log("multiple");
  6.  
  7. // from an input element
  8. var filesToUpload = this.files;
  9. //console.log(filesToUpload);
  10.  
  11. if(typeof this.files[0] !== "undefined") {
  12. console.log("multiple-1");
  13. var img = document.createElement("img");
  14. img.src = window.URL.createObjectURL(this.files[0]);
  15.  
  16. $( img ).load(function() {
  17. console.log("multiple-1-loaded");
  18. canvas = $("#uploading_canvas_image_1").get(0);
  19.  
  20. var MAX_WIDTH = 550;
  21. var MAX_HEIGHT = 400;
  22. var width = img.width;
  23. var height = img.height;
  24.  
  25. if (width > height) {
  26. if (width > MAX_WIDTH) {
  27. height *= MAX_WIDTH / width;
  28. width = MAX_WIDTH;
  29. }
  30. } else {
  31. if (height > MAX_HEIGHT) {
  32. width *= MAX_HEIGHT / height;
  33. height = MAX_HEIGHT;
  34. }
  35. }
  36.  
  37. canvas.width = width;
  38. canvas.height = height;
  39. var ctx = canvas.getContext("2d");
  40. ctx.drawImage(img, 0, 0, width, height);
  41.  
  42. var dataurl = canvas.toDataURL("image/jpg");
  43.  
  44. $( "#dataurl_image_1" ).val(dataurl);
  45.  
  46. });
  47. }
  48.  
  49. if(typeof this.files[1] !== "undefined") {
  50. console.log("multiple-2");
  51. var img = document.createElement("img");
  52. img.src = window.URL.createObjectURL(this.files[1]);
  53.  
  54. $( img ).load(function() {
  55. console.log("multiple-2-loaded");
  56. canvas = $("#uploading_canvas_image_2").get(0);
  57.  
  58. var MAX_WIDTH = 550;
  59. var MAX_HEIGHT = 400;
  60. var width = img.width;
  61. var height = img.height;
  62.  
  63. if (width > height) {
  64. if (width > MAX_WIDTH) {
  65. height *= MAX_WIDTH / width;
  66. width = MAX_WIDTH;
  67. }
  68. } else {
  69. if (height > MAX_HEIGHT) {
  70. width *= MAX_HEIGHT / height;
  71. height = MAX_HEIGHT;
  72. }
  73. }
  74.  
  75. canvas.width = width;
  76. canvas.height = height;
  77. var ctx = canvas.getContext("2d");
  78. ctx.drawImage(img, 0, 0, width, height);
  79.  
  80. var dataurl = canvas.toDataURL("image/jpg");
  81.  
  82. $( "#dataurl_image_2" ).val(dataurl);
  83.  
  84. });
  85. }
  86.  
  87. if(typeof this.files[2] !== "undefined") {
  88. console.log("multiple-3");
  89. var img = document.createElement("img");
  90. img.src = window.URL.createObjectURL(this.files[2]);
  91.  
  92. $( img ).load(function() {
  93. console.log("multiple-3-loaded");
  94. canvas = $("#uploading_canvas_image_3").get(0);
  95.  
  96. var MAX_WIDTH = 550;
  97. var MAX_HEIGHT = 400;
  98. var width = img.width;
  99. var height = img.height;
  100.  
  101. if (width > height) {
  102. if (width > MAX_WIDTH) {
  103. height *= MAX_WIDTH / width;
  104. width = MAX_WIDTH;
  105. }
  106. } else {
  107. if (height > MAX_HEIGHT) {
  108. width *= MAX_HEIGHT / height;
  109. height = MAX_HEIGHT;
  110. }
  111. }
  112.  
  113. canvas.width = width;
  114. canvas.height = height;
  115. var ctx = canvas.getContext("2d");
  116. ctx.drawImage(img, 0, 0, width, height);
  117.  
  118. var dataurl = canvas.toDataURL("image/jpg");
  119.  
  120. $( "#dataurl_image_3" ).val(dataurl);
  121.  
  122. });
  123. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement