آپلود فایل در PHP با استفاده از PDO و Ajax

11 ژانویه, 2019| تاپ تمپ
upload-files-using-pdo-ajax

آموزش آپلود فایل در PHP با استفاده از PDO و Ajax و MySql

در این آموزش ما یک فایل آپلود ساده را در PHP با استفاده از PDO و AJAX ایجاد می‌کنیم. PDO مخفف (PHP Data Object) ابزار و یا یک افزونه (Extention) برای PHP ورژن ۵ به بالاست که به شما اجازه می دهد یک کد واحد برای تمام دیتابیس ها ایجاد کنید.

شما با استفاده از PDO می توانید بگونه ای دیتابیس را طراحی کنید که هر لحظه دوست داشتید نوع آن را تغییر دهید. مثلا سایت شما در حال حاضر با دیتابیس MySQL طراحی شده و به یکباره و بنا به دلایل مختلف می خواهید این پایگاه داده را به نوع SQL Server تغییر دهید. در صورتیکه از افزونه ی PDO برای کدنویسی خودتان استفاده نکرده باشید باید تمام کدهای مربوط به پایگاه داده و بعضا کوئری ها را تغییر دهید. ولی اگر کدهای شما با ابزار PDO طراحی شده باشد می توانید به راحتی هرچه تمام تر به و تنها با اعمال چندین دستور ساده پایگاه داده ی خود را نوع دلخواه تغییر دهید.

پیش نیاز:

۱- XAMPP یا هر سرور محلی که اسکریپت های PHP را اجرا می کنید را دانلود و نصب کنید. لینک دانلود زمپ سرور:
https://www.apachefriends.org/index.html

۲- فایل کتابخانه jquery که از لینک زیر می توانید دانلود کنید.
لینک دانلود jquery :
https://jquery.com/

۳- بوت استرپ برای طراحی
لینک دانلود bootstrap :
https://getbootstrap.com/

ایجاد ارتباط با پایگاه‌داده

من ازکد زیر برای اتصال استفاده کردم که شما هم می توانید آن را کپی کنید و فایلی به نام connection.php ساخته و دخیره کنید:

<?php
	$conn = new PDO( 'mysql:host=localhost;dbname=db_file', 'root', '');
	if(!$conn){
		die("خطا: اتصال به پایگاه داده با خطا مواجه شده است.");
	}
?>

 

ایجاد رابط کاربری:

ما یک فرم ساده برای رابط کاربری خود ایجاد می‌کنیم و آن را با نام index.php ذخیره می کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
	    <title>آپلود فایل در PHP با استفاده از PDO و Ajax</title>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.rtl.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="http://toptemp.ir">TOPTEMP</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">آپلود فایل در PHP با استفاده از PDO و Ajax</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<form class="form-inline" method="POST">
			<label><input type="file" id="file" class="form-control" /></label>
			<button type="button" class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-upload"></span> آپلود</button>
			<br /><br />
			<div id="result" style="display:none;"></div>
		</form>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead class="alert-info">
					<tr>
						<th>نام فایل</th>
						<th>محل فایل</th>
					</tr>
				</thead>
				<tbody id="data" style="background-color:#fff;"></tbody>
			</table>
		</div>
	</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
ایجاد عملکرد اصلی:

این کد شامل تابع اصلی برنامه می شود که فایل را با استفاده از ajax بارگذاری می کند تا مانع از بازخوانی مجدد مرورگر وب شود.

data.php

<?php
	require 'connection.php';
	$query = $conn->prepare("SELECT * FROM `file` ORDER BY `filename` ASC");
	$query->execute();
	while($fetch = $query->fetch()){
?>
<tr>
	<td><?php echo $fetch['filename']?></td>
	<td><?php echo $fetch['location']?></td>
</tr>
<?php
	}
?>

upload.php

<?php
	require_once 'connection.php';
 
 
	try{
		$file_name = $_FILES['file']['name'];
		$file_temp = $_FILES['file']['tmp_name'];
		$path = "upload/".$file_name;
		$exp = explode(".", $_FILES['file']['name']);
		$name = $exp[0];
 
		if(move_uploaded_file($file_temp, $path)){
			$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
			$sql = "INSERT INTO `file` (`filename`, `location`) VALUES ('$name', '$path')";
			$conn->exec($sql);
		}
 
	}catch(PDOException $e){
		echo $e->getMessage();
	}
 
	$conn = null;
 
	echo "success";
?>

 

script.js
$(document).ready(function(){

    display_data();

    function display_data(){
        $.ajax({
            url: 'data.php',
            type: 'POST',
            data: {res: 1},
            success: function(data){
                $('#data').html(data);
            }
        });
    }

    $('#upload').on('click', function(){
        var file = $('#file');
        var file_length = file[0].files.length;
        var file_data = file.prop('files')[0];
        $('#result').css('display', '');
        if(file_length > 0){
            var form_data = new FormData();
            form_data.append('file', file_data);
            $.ajax({
                url: 'upload.php',
                type: 'POST',
                processData: false,
                contentType: false,
                data: form_data,
                success: function(data){
                    if(data == "success"){
                        $("#result").attr('class', 'alert alert-success');
                        $("#result").html("فایل آپلود شد");
                        display_data();
                    }
                }
            });
        }else{
            $("#result").attr('class', 'alert alert-danger');
            $("#result").html("لطفا ابتدا فایل را انتخاب کنید");
        }

    });
});

در نهایت ما موفق شدیم یک پرونده ساده آپلود با استفاده از PDO و آژاکس ایجاد کنیم. امیدوارم این برنامه آموزشی ساده به شما کمکی کرده باشد، برای به روز رسانی‌های بیشتر از سایت ما دیدن کنید.
موفق باشید.

 

دسته‌ها: آموزش, آموزش Ajax, آموزش PDO, آموزش PHP

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Rating*

تماس با ما

واتساپ :

9216471220

تلگرام :

9216471220

1981