ساخت فرم تماس با ما با قابلیت ارسال فایل ضمیمه در php

در این آموزش قصد داریم به شما نحوه ساخت فرم تماس با ما با قابلیت ارسال فایل پیوست و ضمیمه (Attachment) به ایمیل را نشان بدیم. ما از کتابخانه PHPMailer از طریق SMP برای ارسال ایمیل استفاده می کنیم (ارسال ایمیل در php) . در آموزش قبلی نحوه ساخت فرم تماس با ما با php دیدیم .

در اینجا قصد داریم

از ajax برای ارسال اطلاعات فرم استفاده کنیم
از کتابخانه PHPMailer و SMTP برای ارسال ایمیل بهره ببریم.

در این مثال , ما یک فرم تماس با ما HTML برای دریافت اطلاعات کاربر به همراه فایل پیوست داریم . بعد از ارسال (submit) فرم, مقادیر فیلدها توسط AJAX به اسکریپت PHP ارسال می شود.

کد php اطلاعات را را به همراه فایل ضمیمه به ایمیل مدیر ارسال و پاسخ را به AJAX برگشت می هد.

فرم تماس با ما به همراه فایل ضمیمه

این کد HTML برای نمایش فیلد ها به کاربر که قصد ارسال یک درخواست/پرس و جو را دارد , استفاده شده است . این فرم شامل ورودی هایی برای نام,ایمیل,موضوع ایمیل,محتوا و فایل است .

<form id="frmContact" action="" method="post">
    <div id="mail-status"></div>
    <div>
        <label style="padding-top: 20px;">Name</label> <span
            id="userName-info" class="info"></span><br /> <input
            type="text" name="userName" id="userName"
            class="demoInputBox">
    </div>
    <div>
        <label>Email</label> <span id="userEmail-info" class="info"></span><br />
        <input type="text" name="userEmail" id="userEmail"
            class="demoInputBox">
    </div>
    <div>
        <label>Attachment</label><br /> <input type="file"
            name="attachmentFile" id="attachmentFile"
            class="demoInputBox">
    </div>
    <div>
        <label>Subject</label> <span id="subject-info" class="info"></span><br />
        <input type="text" name="subject" id="subject"
            class="demoInputBox">
    </div>
    <div>
        <label>Content</label> <span id="content-info" class="info"></span><br />
        <textarea name="content" id="content" class="demoInputBox"
            cols="60" rows="6"></textarea>
    </div>
    <div>
        <input type="submit" value="Send" class="btnAction" />
    </div>
</form>
<div id="loader-icon" style="display: none;">
    <img src="LoaderIcon.gif" />
</div>

<div>

<label style="padding-top: 20px;">Name</label> <span

id="userName-info" class="info"></span><br /> <input

type="text" name="userName" id="userName"

class="demoInputBox">

</div>

<div>

<label>Email</label> <span id="userEmail-info" class="info"></span><br />

<input type="text" name="userEmail" id="userEmail"

class="demoInputBox">

</div>

<div>

<label>Attachment</label><br /> <input type="file"

name="attachmentFile" id="attachmentFile"

class="demoInputBox">

</div>

<div>

<label>Subject</label> <span id="subject-info" class="info"></span><br />

<input type="text" name="subject" id="subject"

class="demoInputBox">

</div>

<div>

<label>Content</label> <span id="content-info" class="info"></span><br />

<textarea name="content" id="content" class="demoInputBox"

cols="60" rows="6"></textarea>

</div>

<div>

</div>

</form>

</div>

در این فرم, وارد کردن همه ورودی ها ضروری است. بنابراین, ما یک اعتبارسنجی جاواسکریپتی به منظور چک کردن مقادیر خالی و اعتبارسنجی فرمت صحیح ایمیل با استفاده از regex (آموزش Regular Expression) اضافه کردیم. این اعتبارسنجی در هنگام ارسال فرم فراخوانی می شود.

تابع ajax برای ارسال داده ها به اسکریپت PHP

با ارسال فرم تماس با ما , اسکریپت جی کوئری زیر یک درخواست AJAX به صفحه PHP برای ارسال داده های فرم , ارسال می کند. در صورت موفقیت آمیز بودن , پاسخ AJAX کاربر را از وضعیت ارسال ایمیل باخبر می کند.

$(document).ready(function (e){
$("#frmContact").on('submit',(function(e){
	e.preventDefault();
	$('#loader-icon').show();
	var valid;	
	valid = validateContact();
	if(valid) {
		$.ajax({
		url: "contact_mail.php",
		type: "POST",
		data:  new FormData(this),
		contentType: false,
		cache: false,
		processData:false,
		success: function(data){
		$("#mail-status").html(data);
		$('#loader-icon').hide();
		},
		error: function(){} 	        
		
		});
	}
}));

$(document).ready(function (e){

$("#frmContact").on('submit',(function(e){

e.preventDefault();

$('#loader-icon').show();

var valid;

valid = validateContact();

if(valid) {

$.ajax({

url: "contact_mail.php",

type: "POST",

data: new FormData(this),

contentType: false,

cache: false,

processData:false,

success: function(data){

$("#mail-status").html(data);

$('#loader-icon').hide();

error: function(){}

});

}

}));

کد php ساخت فرم تماس با ما با قابلیت ارسال فایل ضمیمه

در این مثال از PHPmailer بری ارسال ایمیل به همراه فایل ضمیمه استفاده کردیم. این کد به شما نحوه ضمیمه کرن فایل آپلودی کاربر را نشان میدهد.

require('phpmailer/class.phpmailer.php');
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "tls";
$mail->Port     = 587;  
$mail->Username = "Your SMTP UserName";
$mail->Password = "Your SMTP Password";
$mail->Host     = "Your SMTP Host";
$mail->Mailer   = "smtp";
$mail->SetFrom($_POST["userEmail"], $_POST["userName"]);
$mail->AddReplyTo($_POST["userEmail"], $_POST["userName"]);
$mail->AddAddress("recipient address");	
$mail->Subject = $_POST["subject"];
$mail->WordWrap   = 80;
$mail->MsgHTML($_POST["content"]);

if(is_array($_FILES)) {
	$mail->AddAttachment($_FILES['attachmentFile']['tmp_name'],$_FILES['attachmentFile']['name']); 
}

$mail->IsHTML(true);
if(!$mail->Send()) {
	echo "Problem in Sending Mail.";
} else {
	echo "Contact Mail Sent.";
}