کار با فایل ها در جاوا اسکریپت ( پیش نمایش تصویر بدون آپلود )

کار با فایل ها در جاوا اسکریپت ( پیش نمایش تصویر بدون آپلود )

فایل ها در جاوا اسکریپت – در این آموزش یاد می گیریم که با FileReader ها کار کنیم . جهت خواندن محتوا فایل ها می باشد و در جاوا اسکریپت مدرن بسیار کاربردی است .

کلاس FileReader دارای event ها و متود های مختلفی می باشد که در این آموزش با آن ها کار می کنیم رویداد change برای زمانی که داده ای بارگذاری می شود و متود readAsDataURL که داده را به URL تبدیل می کند .

دمو برنامه


فایل index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>
    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <input type="file" id="file" multiple>
		
       
    </div>
    <script src="static/js/app.js"></script>
</body>
</html>


اسکریپت app.js

const freader = new FileReader();

const body = document.getElementsByTagName("body")[0];
const fileInpDOM = document.getElementById("file");
fileInpDOM.addEventListener("change" , getMetaFile);

function loadFileReader(files , index){
	const file = files[index];
	if(!file) return false;
	
	freader.readAsDataURL(file);
	freader.onload = function(event){
		const result = event.target.result;
		const img = document.createElement("img");
		img.src = result;
		body.appendChild(img);
		index++;
		loadFileReader(files , index);
	}
}

function getMetaFile(event){
	const files = Array.from(event.target.files);
	var i=0;	
	loadFileReader(files,i);
}


دانلود سورس کد

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859