bookstoreHTML/arrastar.html at main · mr-body/bookstoreHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrastar e soltar uma imagem</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }

  #drop-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    margin: 20px;
    cursor: pointer; /* Adicionado */
    position: relative; /* Adicionado */
  }

  #loading-text {
    position: absolute;
    bottom: 2%;
    left: 50%;
  }

  .button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
  }

  #image-preview {
    display: none;
    text-align: center;
    margin: 20px;
  }

  #preview {
    max-width: 100%;
    max-height: 300px;
    border: 1px dashed #ccc;
    border-radius: 5px;
  }
</style>
</head>
<body>

<div id="drop-area" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="dropImage(event)">
  <h1>Arraste e solte uma imagem aqui</h1>
  <p>Ou clique para selecionar uma imagem</p>
  <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)" hidden>
  <label class="button" for="fileElem">Selecionar uma imagem</label>
</div>


<p id="loading-text" style="display:none;">Loading...</p> <!-- Adicionado -->

<div id="image-preview">
  <h2>Preview da imagem</h2>
  <img id="preview" src="#" alt="Imagem preview">
</div>

<script>
function allowDrop(event) {
  event.preventDefault();
}

function dragEnter(event) {
  event.preventDefault();
  document.getElementById('drop-area').style.border = '2px solid green';
  document.getElementById('drop-area').style.cursor = 'copy'; // Modificado
}

function dragLeave(event) {
  event.preventDefault();
  document.getElementById('drop-area').style.border = '2px dashed #ccc';
  document.getElementById('drop-area').style.cursor = 'default'; // Modificado
}

function dropImage(event) {
  event.preventDefault();
  document.getElementById('drop-area').style.border = '2px dashed #ccc';
  document.getElementById('loading-text').style.display = 'block'; // Adicionado
  var files = event.dataTransfer.files;
  handleFiles(files);
}

function handleFiles(files) {
  var preview = document.getElementById('preview');
  var file = files[0];
  var reader = new FileReader();

  reader.onload = function(event) {
    preview.src = event.target.result;
    // document.getElementById('drop-area').style.display = 'none';
    document.getElementById('image-preview').style.display = 'block';
    document.getElementById('loading-text').style.display = 'none'; // Adicionado
  }

  reader.readAsDataURL(file);
}
</script>

</body>
</html>