Merhaba, yapmak istediğim şey, kutunun üstüne gelip mouse ile tıklanırsa bir resim seçip bu resmi igili kutu içinde göstermek. Bundan sonra start scan
butonuna basılınca seçmiş olduğum bu resmi server'a göndermek istiyorum.
Resim seçebiliyorum ama bu resmi kutu içerisinde göremiyorum nasıl bir yol izlemeliyim ?
Seçilen resme myFunction
içinde ulaşmak istiyorum sonrasında bu resim server'a gönderilecek, XMLHttpRequest() ile yapmaya çalıştım fakat seçilen dosyaya erişemedim.
Önerileriniz nelerdir ?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 120px;
height: 280px;
border-style: solid;
border-color: #C0C0C0;
}
.out_box {
width: 350px;
height: 380px;
border-style: solid;
border-color: #C0C0C0;
margin-left: 420px;
margin-top: 40px;
}
.buton {
margin-left: 570px;
margin-top: 40px;
border-style: solid;
border-color: #C0C0C0;
}
.container {
height: 500px;
position: relative;
border: 3px solid #C0C0C0;;
}
div.focus-image {
border:1px solid #dddddd;
display:inline-block;
position:relative;
cursor:pointer;
width: 110px;
height: 280px;
border-style: solid;
border-color: #C0C0C0;
margin: 32px;
margin-left: 550px;
margin-top: 40px;
}
div.focus-image div {
display:none;
border:2px solid red;
position:absolute;
left:90px; /*x*/
top:60px; /*y*/
}
#file-input {
display: none;
}
</style>
</head>
<body>
<div class="container">
<label for="file-input">
<div id="first" class="focus-image"></div>
<input type="file" id="file-input"/>
</label>
<button class="buton" onclick="myFunction()">Start Scan</button>
</div>
<div id="output_box" class="out_box"></div>
<script>
function myFunction() {
//not implemented
var formdata = new FormData();
formdata.append("snap", img);
var xhr = new XMLHttpRequest();
xhr.open("POST", "{{ url_for('upload') }}", true);
xhr.onload = function() {
if(this.status = 200) {
console.log(this.response);
} else {
console.error(xhr);
}
alert(this.response);
};
xhr.send(formdata);
}
</script>
</div>
</body>
</html>