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

23-12-2021

1328

تصميم المواقع و التطبيقات 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>