تصميم زر لإظهار الصورة قبل رفعها بواسطة javascript

23-12-2021

1247

تصميم المواقع و التطبيقات NewMediene

بسم الله الرحمن الرحيم ، تصميم زر لإظهار الصورة قبل رفعها بواسطة javascript .

في هذا المثال نحتاج القليل من أكواد البرمجة JAVASCRIPT - HTML - CSS

1- ملف index.php سيكون بمثابة الصفحة التي بها أداة أو صندوق رفع الصور
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >

<style>
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');

*,*:before,*:after {
padding: 0;
margin: 0;
}

.container {
margin: 0 auto;
max-width: 450px;
font-family: 'Cairo', sans-serif;
font-size: 10pt;
}

.logo a img{
float: right;
width: 70%;
margin: 30px 15%;
}

.msg {
float: right;
width: 90%;
padding: 5px 5%;
background-color: yellow;
margin-bottom: 10px;
color: #333333;
text-align: center;
}

#forminput {
float: right;
width: 90%;
padding: 5%;
background-color: #cccccc;

}#forminput h3 {
float: right;
width: 100%;
padding: 5px 0px;
text-align: center;
background-color: #333333;
color: white;

}

#upfile {
display: none;

}#Btn {
float: right;
background-color: brown;
color: white;
width: 96%;
padding: 5px 2%;
text-align: center;
cursor:pointer;

}#Btn:hover {
background-color: darkslategray;

}.showimg img{
float: right;
width: 100%;
margin: 15px 0px;
}

</style>

<link rel="icon" href="http://www.dzworkers.com/files/logo/icon.png" >

<title>إظهار الصورة قبل رفعها</title>

</head>

<body>

<div class="container" >

<div class="logo" ><a href="http://www.dzworkers.com" ><img src="http://www.dzworkers.com/files/logo/logo.jpeg" /></a></div>

<?php

// -- DZWORKERS.COM ---------------- /|
// -- DESIGN BY AMMANI BOUMEDIENE -- /|
// -- 12-2021 | ALGERIA SBA -------- /|
// -- FB.COM/NEWMEDIENE ------------ /|

// --- ?>

<form id="forminput" method="POST" enctype="multipart/form-data" >

<h3 class="title" >إظهار الصورة قبل رفعها</h3>

<div class="showimg" ><img id="thumbnil" src="" alt="" ></div>

<input id="upfile" onchange="showMyImage(this)" type="file" name="photo" accept="image/*" required>

<div id="Btn" onclick="getFile()" >إضغط لإختيار الصورة</div>

</form>

</div>

<script>
function getFile() { document.getElementById("upfile").click(); } function sub(obj) { var file = obj.value; var fileName = file.split("\\"); document.getElementById("Btn").innerHTML = fileName[fileName.length - 1]; document.myForm.submit(); event.preventDefault(); }

function showMyImage(fileInput) {

var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;

if (!file.type.match(imageType)) { continue;}

var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
let print = () => {
let objFra = document.getElementById('myFrame');
objFra.contentWindow.focus();
objFra.contentWindow.print();
}
</script>

</body>

</html>