Cách để làm upload ajax php

19/03/2021 15:01 3076

Cách để làm upload ajax php: hầu như trong mọi công việc xử lý hiện nay chúng ta đều sử dụng ajax thay vì submit form đơn thuần, vì nó tiện lợi và không load lại page giúp tiết kiệm thời gian load lại toàn trang và trong các form thì đôi lúc chúng ta sẽ gặp upload file. Vậy xử lý nó như thế nào. Hôm nay tôi sẽ chia sẽ cách làm

Table of Contents

1. Kịch bản script

Kịch bản ở đây là chúng ta cần làm một form liên hệ báo giá với các file như hình bên dưới, đặc biệt có field file

2. Mã html của form

<div class="yeu_cau_bao_gia_out">
    <form id="yeu_cau_bao_gia" action="" method="post">
    <div class="file_yeu_cau"><label>File đính kèm <input type="file" name="file_dinh_kem" class="file_dinh_kem"></label></div>
    <div class="yeu_cau_bao_gia_left">
        <label>Tên của bạn: <span>*</span><input type="text" name="ho_va_ten" class="ho_va_ten" placeholder="Họ và tên..."></label>
        <label>Email: <input type="email" name="email" class="email" placeholder="Nhập email..."></label>
        <label>Điện thoại: <span>*</span><input type="tel" name="phone" class="phone" placeholder="Số điện thoại..."></label>
    </div>
    <div class="yeu_cau_bao_gia_right">
        <label>Tin nhắn: <textarea name="content" class="content" placeholder="Nhập nội dung..."></textarea></label>
        <button type="submit" class="btn-yeu-cau-bao-gia">Gửi yêu cầu</button>
    </div>
    </form>
</div>

<label>Email: <input type="email" name="email" class="email" placeholder="Nhập email..."></label>

<label>Điện thoại: <span>*</span><input type="tel" name="phone" class="phone" placeholder="Số điện thoại..."></label>

</div>

</div>

</form>

</div>

3.Mã js

$(document).on('submit','form#yeu_cau_bao_gia',function(e){
    e.preventDefault();
    $('button.btn-yeu-cau-bao-gia').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Gửi yêu cầu');
    var ho_va_ten = $('.ho_va_ten').val(),
        email = $('.email').val(),
        phone = $('.phone').val(),
        content = $('.content').val();
    if(	ho_va_ten == ""){
        alert("Vui lòng cung cấp họ và tên!");
        $('.ho_va_ten').focus();
        $('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');
        return false;
    }
    if(	phone == ""){
        alert("Vui lòng cung cấp số điện thoại!");
        $('.phone').focus();
        $('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');
        return false;
    }
     //Lấy ra files
    var file_data = $('.file_dinh_kem').prop('files')[0];
    console.log(file_data);
    if(typeof(file_data)  === "undefined"){
        //Trường hợp không upload file
    }else{
        //lấy ra kiểu file
        var type = file_data.type;
        var allow_files=[
            //excel > 2003
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            //excel 97 - 2003
            "application/vnd.ms-excel",
            //word > 2003
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            //word 97-2003
            "application/msword",
            //pdf
            "application/pdf"
        ];
        if(!allow_files.includes(type)){
            alert("Chỉ cho phép file word, excel, pdf!");
            $('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');
            return false;
        };
    }
    //khởi tạo đối tượng form data
    var form_data = new FormData();
    //thêm files vào trong form data
    form_data.append('file_dinh_kem', file_data);
    form_data.append('ho_va_ten', ho_va_ten);
    form_data.append('email', email);
    form_data.append('phone', phone);
    form_data.append('content', content);
    console.log(form_data);
    $.ajax({
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        url:'ajax/yeu_cau_bao_gia.php',
        cache:false,
        dataType: 'JSON',
        success:function(response){
            console.log(response);
            if(response.success == "1"){
                alert(response.data.message);
                $('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');
                location.reload();
            }else{
                alert(response.data.message);
                $('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');
                location.reload();
            }
        }
    });
});

$(document).on('submit','form#yeu_cau_bao_gia',function(e){

e.preventDefault();

$('button.btn-yeu-cau-bao-gia').html('<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Gửi yêu cầu');

var ho_va_ten = $('.ho_va_ten').val(),

email = $('.email').val(),

phone = $('.phone').val(),

content = $('.content').val();

if( ho_va_ten == ""){

alert("Vui lòng cung cấp họ và tên!");

$('.ho_va_ten').focus();

$('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');

return false;

}

if( phone == ""){

alert("Vui lòng cung cấp số điện thoại!");

$('.phone').focus();

$('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');

return false;

}

//Lấy ra files

var file_data = $('.file_dinh_kem').prop('files')[0];

console.log(file_data);

if(typeof(file_data) === "undefined"){

//Trường hợp không upload file

}else{

//lấy ra kiểu file

var type = file_data.type;

var allow_files=[

//excel > 2003

"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",

//excel 97 - 2003

"application/vnd.ms-excel",

//word > 2003

"application/vnd.openxmlformats-officedocument.wordprocessingml.document",

//word 97-2003

"application/msword",

//pdf

"application/pdf"

];

if(!allow_files.includes(type)){

alert("Chỉ cho phép file word, excel, pdf!");

$('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');

return false;

};

}

//khởi tạo đối tượng form data

var form_data = new FormData();

//thêm files vào trong form data

form_data.append('file_dinh_kem', file_data);

form_data.append('ho_va_ten', ho_va_ten);

form_data.append('email', email);

form_data.append('phone', phone);

form_data.append('content', content);

console.log(form_data);

$.ajax({

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

url:'ajax/yeu_cau_bao_gia.php',

cache:false,

dataType: 'JSON',

success:function(response){

console.log(response);

if(response.success == "1"){

alert(response.data.message);

$('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');

location.reload();

}else{

alert(response.data.message);

$('button.btn-yeu-cau-bao-gia').html('Gửi yêu cầu');

location.reload();

}

});

Các bài viết khác có thể hữu ích với bạn

4. Mã php trong file yeu_cau_bao_gia.php

Nói chung ta chỉ cần quan tâm đoạn upload file còn đoạn cập nhật dữ liệu chúng ta có thể tùy biến theo cơ sở dữ liệu của chúng ta nhé bạn

<?php
$results=array();
//upload file
if(!empty($_FILES['file_dinh_kem'])){
	$target_dir = _upload_files;
	$target_file = $target_dir . basename($_FILES["file_dinh_kem"]["name"]);
	$uploadOk = 1;
	$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
	$message='';
	// Check if file already exists
	if (file_exists($target_file)) {
	  $message = "File đã có trong hệ thống.";
	  $uploadOk = 0;
	}
	
	// Check file size
	if ($_FILES["fileToUpload"]["size"] > 10000) {
	  $message = "Chỉ cho file 10 mg trở lại";
	  $uploadOk = 0;
	}
	
	// Allow certain file formats
	$allow_file_formats=array("pdf","xlsx","xls","doc","docx");
	if(!in_array($imageFileType,$allow_file_formats)) {
	  $message = "Chi cho phép file pdf, excel, word";
	  $uploadOk = 0;
	}
	
	// Check if $uploadOk is set to 0 by an error
	if ($uploadOk == 0) {
		 $results['file_status']=$message;
	} else {
	  if (move_uploaded_file($_FILES["file_dinh_kem"]["tmp_name"], $target_file)) {
		  $new_name_file=date('d-m-Y')."-".time()."yeu-cau-bao-gia.".$imageFileType;
		  $data['file'] = $new_name_file;
		  rename($target_file,$target_dir.$new_name_file);
		  @unlink($target_file);
		 $results['file_status']="Tên file ".$new_name_file;
	  } else {
		 $results['file_status']="Có lỗi trong quá trình upload";
	  }
	}
}
//Cập nhật vào cơ sở dữ liệu
$status = true;
$email = $_POST["email"];
$status = 1;
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
	$msg = 'Không phải định dạng email';
	$status = 0;
}  else {
	/*$c = _fetch_array("SELECT count(id) as num FROM table_newsletter WHERE email like '".$email."'");
	if($c['num'] != 0){
		$msg = 'Email đã tồn tại';
		$status = 0;
	}*/
}	
$data['email'] = mysql_real_escape_string($_POST['email']);
$data['ten'] = mysql_real_escape_string($_POST['ho_va_ten']);
$data['dienthoai'] = mysql_real_escape_string($_POST['phone']);
$data['diachi'] = '';
$data['noidung'] = $_POST['content'];
$data['ngaytao'] = time();
$data['type'] = 'dangkynhanemail';
$d->setTable('newsletter');
if ($status == 1) {
	if($d->insert($data)){
		$msg = 'Cám ơn bạn đã yêu cầu! Chúng tôi sẽ xử lý trong thời gian nhanh nhất có thể!';
	}
	else{
		$msg = 'Có lỗi trong quá trình gửi yêu cầu vui lòng thực hiện lại sau!';
	}
}
$results['message']=$msg;
echo json_encode(array('success' => $status,'data'=>$results),true);

<?php

$results=array();

//upload file

if(!empty($_FILES['file_dinh_kem'])){

$target_dir = _upload_files;

$target_file = $target_dir . basename($_FILES["file_dinh_kem"]["name"]);

$uploadOk = 1;

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

$message='';

// Check if file already exists

if (file_exists($target_file)) {

$message = "File đã có trong hệ thống.";

$uploadOk = 0;

}

// Check file size

if ($_FILES["fileToUpload"]["size"] > 10000) {

$message = "Chỉ cho file 10 mg trở lại";

$uploadOk = 0;

}

// Allow certain file formats

$allow_file_formats=array("pdf","xlsx","xls","doc","docx");

if(!in_array($imageFileType,$allow_file_formats)) {

$message = "Chi cho phép file pdf, excel, word";

$uploadOk = 0;

}

// Check if $uploadOk is set to 0 by an error

if ($uploadOk == 0) {

$results['file_status']=$message;

} else {

if (move_uploaded_file($_FILES["file_dinh_kem"]["tmp_name"], $target_file)) {

$new_name_file=date('d-m-Y')."-".time()."yeu-cau-bao-gia.".$imageFileType;

$data['file'] = $new_name_file;

rename($target_file,$target_dir.$new_name_file);

@unlink($target_file);

$results['file_status']="Tên file ".$new_name_file;

} else {

$results['file_status']="Có lỗi trong quá trình upload";

}

//Cập nhật vào cơ sở dữ liệu

$status = true;

$email = $_POST["email"];

$status = 1;

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

$msg = 'Không phải định dạng email';

$status = 0;

} else {

/*$c = _fetch_array("SELECT count(id) as num FROM table_newsletter WHERE email like '".$email."'");

if($c['num'] != 0){

$msg = 'Email đã tồn tại';

$status = 0;

}*/

}

$data['email'] = mysql_real_escape_string($_POST['email']);

$data['ten'] = mysql_real_escape_string($_POST['ho_va_ten']);

$data['dienthoai'] = mysql_real_escape_string($_POST['phone']);

$data['diachi'] = '';

$data['noidung'] = $_POST['content'];

$data['ngaytao'] = time();

$data['type'] = 'dangkynhanemail';

$d->setTable('newsletter');

if ($status == 1) {

if($d->insert($data)){

$msg = 'Cám ơn bạn đã yêu cầu! Chúng tôi sẽ xử lý trong thời gian nhanh nhất có thể!';

}

else{

$msg = 'Có lỗi trong quá trình gửi yêu cầu vui lòng thực hiện lại sau!';

}

$results['message']=$msg;

echo json_encode(array('success' => $status,'data'=>$results),true);

4.9/5 (10 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Cách để làm upload ajax php

1. Kịch bản script

2. Mã html của form

3.Mã js

4. Mã php trong file yeu_cau_bao_gia.php

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)