1pppp

Untitled

Aug 20th, 2020
42
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.18 KB | None | 0 0
  1. <input type="file" name="path[]" id="path[]" multiple accept="image/*">
  2. <div id="for_preview_uploads">
  3. </div>
  4. {{-- <div>--}}
  5. {{-- строка ниже--}}
  6. {{-- </div>--}}
  7. <script>
  8. function resizeImage(img) {
  9.  
  10. const W = parseInt(img.width / 4);
  11. const H = parseInt(img.height / 4);
  12.  
  13. const canvas = document.createElement("canvas");
  14. canvas.width = W;
  15. canvas.height = H;
  16.  
  17. const ctx = canvas.getContext("2d");
  18. ctx.drawImage(img, 0, 0, W, H);
  19.  
  20. const resizedImg = new Image();
  21. resizedImg.src = canvas.toDataURL('image/jpeg', 1);
  22. //document.body.append(resizedImg);
  23. document.querySelector("#for_preview_uploads").append(resizedImg);
  24.  
  25. }
  26.  
  27. function handleFiles(e) {
  28.  
  29. for (const file of this.files) {
  30.  
  31. const img = document.createElement("img");
  32. const reader = new FileReader();
  33.  
  34. reader.addEventListener("load", (e) => {
  35. img.addEventListener("load", (e) => {
  36. resizeImage(img);
  37. });
  38. img.src = e.target.result;
  39. });
  40.  
  41. reader.readAsDataURL(file);
  42.  
  43. }
  44.  
  45. }
  46.  
  47. const fileInput = document.getElementById("path[]");
  48.  
  49. fileInput.addEventListener("change", handleFiles, false);
  50.  
  51.  
  52. </script>
  53. @forelse ($product->images as $image)
  54. <img src="{{$image->path }} " alt="{{$image->title}}">
  55. <a href="public/uploads/product_images/delete/{{$image->id}}" class="card-link">удалить</a>
  56. @empty
  57. Нет фотографий
  58. @endforelse
  59.  
  60.  
  61.  
  62. public function destroy(Image $image)
  63. {
  64. Storage::disk('public/uploads/product_images/')->delete($image->path);
  65. $image->delete();
  66. return redirect()->route('product.edit', ['id' => $image->product_id]);
  67. }
Advertisement
Add Comment
Please, Sign In to add comment