Làm cách nào để tạo thanh tiến trình chèn dữ liệu trong PHP?

XAMPP là gói ngăn xếp giải pháp máy chủ web đa nền tảng miễn phí và mã nguồn mở do Apache phát triển, cho phép dễ dàng kiểm tra ứng dụng web trên máy chủ web cục bộ. Nhưng đến lúc upload file lên server bằng PHP thì đau đầu. Trong hầu hết các trường hợp, máy chủ PHP không cho phép tải lên tệp lớn hơn 30 MegaByte (30MB)

Nội dung chính Show

Tải lên video có thanh tiến trình
Tạo chỉ mục. tập tin php
Thêm Ajax JavaScript xử lý tiến trình “thời gian thực”
Tạo tệp upload.php để xử lý tải lên video bằng AJAX
Hoàn thành mã
Làm cách nào để tạo thanh tiến trình để chèn dữ liệu trong PHP?
Làm cách nào để tạo thanh tiến trình động trong PHP?
Làm cách nào để hiển thị thanh tiến trình trong khi tải bằng Ajax?
Làm cách nào để chèn dữ liệu đăng ký vào cơ sở dữ liệu bằng PHP?

Chỉ sử dụng PHP, chúng tôi không thể tạo giao diện thanh tiến trình vì PHP sẽ không cung cấp phản hồi cho đến khi quá trình tải lên hoàn tất. Vì vậy, để tạo giao diện thanh tiến trình, chúng ta phải sử dụng JavaScript cùng với PHP

Việc tải lên tệp video bằng biểu mẫu HTML là phổ biến. Tuy nhiên, tải video lên bằng Progress Bar là tính năng quan trọng nhất của ứng dụng web động. Chức năng tải lên tệp video có thể dễ dàng thực hiện bằng PHP. Khi bạn sử dụng PHP để tải tệp lên, trang thường được làm mới. Tuy nhiên, javaScript và Ajax có thể được sử dụng để tải lên video hoặc hình ảnh mà không cần làm mới trang
Thanh tiến trình rất hữu ích để hiển thị tiến trình tải lên ở định dạng mà con người có thể đọc được. Thanh tiến trình là một tính năng đồ họa ghi lại trạng thái của một thao tác. Thanh tiến trình thường được sử dụng để xem phần trình bày phần trăm tiến trình tải lên, tải xuống hoặc cài đặt. Hướng dẫn này sẽ chỉ rõ Cách tải video lên bằng thanh tiến trình trong PHP
đề nghị đọc. Chuyển đổi kích thước tệp thành định dạng có thể đọc được trong PHP
Mục lục
Tải lên video có thanh tiến trình
Tạo chỉ mục. tập tin php
Thêm Ajax JavaScript xử lý tiến trình “thời gian thực”
Tạo tải lên. php để xử lý tải lên video bằng AJAX
Hoàn thành mã
gói từ
Tải lên video có thanh tiến trình
Trước tiên, chúng tôi sẽ tạo biểu mẫu HTML để tải video lên với chức năng thanh tiến trình
Tạo chỉ mục. tập tin php
Ở dạng này, chúng tôi có đầu vào tệp và thanh tiến trình để hiển thị tiến trình của tệp tải lên
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<. DOCTYPE html>
<html lang="vi">
<đầu>
    <tiêu đề>Đang tải lên video with a progress bar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta tên='viewport' content='width=device-width, initial-scale=1'>

</đầu>
<nội dung>
<div class="vùng chứa">
    <div class="row text-center">
        <div lớp="col-2"></div>
        <div lớp="col-8">
            <biểu mẫu id="upload_form" enctype="multipart/form-data" method="post">
                        <div lớp="form-group">
                    <đầu vào loại="file" name="uploadingfile" id="uploadingfile">
                </div>
                        <div lớp="form-group">
                    <đầu vào lớp="btn btn-primary" type="button" value="Upload File" name="btnSubmit"
                           onclick="uploadFileHandler()"><
                </div>
                        <div lớp="form-group">
                    <div lớp="progress" id="progressDiv" style="display:none;">
                        <tiến độ id="progressBar" value="0" max="100" style="width:100%; height: 1.2rem;"></tiến độ>
                    </div>
                </div>
                        <div lớp="form-group">
                    <h3 id="status"></h3>
                    <p id="uploaded_progress"></p>
                </div>
            </biểu mẫu>
        </div>
        <div lớp="col-2"></div>
    </div>
</div>
</body>
</html>

Thêm Ajax JavaScript xử lý tiến trình “thời gian thực”
Mã javaScript sau gửi dữ liệu từ tệp đã chọn tới tập lệnh phía máy chủ mà không cần tải lại trang
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

    hàm _(abc) {
    trả lại tài liệu. getElementById(abc);
}
chức năng uploadFileHandler() {
    tài liệu. getElementById('progressDiv').kiểu dáng. hiển thị='chặn';
    var tệp = _("uploadingfile").tệp[0];
    var dữ liệu biểu mẫu = mới FormData();
    dữ liệu biểu mẫu. chắp thêm("tệp tải lên", file);
    var ajax = mới XMLHttpRequest();
    ajax. tải lên. addEventListener("progress", progressHandler, false);
    ajax. addEventListener("load", completeHandler, false);
    ajax. addEventListener("lỗi", errorHandler, false);
    ajax. addEventListener("hủy", abortHandler, false);
    ajax. mở("POST", "upload.php");
    ajax. gửi(dữ liệu biểu mẫu);
}
chức năng progressHandler(sự kiện) {
    var loaded = new Number((event.đã tải / 1048576));//Make loaded a "number" and divide bytes to get Megabytes
    var total = new Number((event.tổng / 1048576));//Make total file size a "number" and divide bytes to get Megabytes
    _("uploaded_progress").innerHTML = "Đã tải lên " + loaded.toPrecision(5) + . " Megabytes of " + total.toPrecision(5);//String output
    var percent = (event.đã tải / sự kiện. tổng) * 100;//Get percentage of upload progress
    _("progressBar").giá trị = Toán học. tròn(phần trăm);//Round value to solid
    _("trạng thái").innerHTML = Toán. vòng(phần trăm) + "% uploaded";//String output
}
function completeHandler(sự kiện) {
    _("trạng thái").innerHTML = sự kiện. mục tiêu. văn bản phản hồi;//Tạo và hiển thị văn bản phản hồi
    _("progressBar").giá trị = 0;/
    tài liệu. getElementById('progressDiv').kiểu dáng. hiển thị = 'none';//Hide progress bar
}
chức năng trình xử lý lỗi(sự kiện) {
    _("trạng thái").innerHTML = "Tải lên không thành công";//Switch status to upload failed
}
hàm abortHandler(sự kiện) {
    _("trạng thái").innerHTML = "Đã hủy tải lên";//Switch status to aborted
}

Tạo tệp upload.php để xử lý tải lên video bằng AJAX
tải lên. php được gọi để xử lý quá trình tải tệp lên bằng PHP theo yêu cầu Ajax
Vì vậy, bây giờ chúng tôi cũng sẽ tạo thư mục "tải lên" trong thư mục làm việc hiện tại để tải tệp lên
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
nếu (. $_FILES["tệp tải lên"]["tmp_name"]) {//No file chosen
    echo "LỖI. Vui lòng duyệt tìm tệp trước khi nhấp vào nút tải lên. ";
    thoát();
} khác {
    $tiện ích mở rộng = thông tin đường dẫn($_FILES['uploadingfile']['name'], PATHINFO_EXTENSION);
    nếu ((($_FILES["uploadingfile"]["type"] == "video/mp4")) && $extension == 'mp4') {

        //Thư mục để đưa tệp vào
        $đường dẫn thư mục = "uploads/";

        //Tên tệp
        $origin_file_name = $_FILES["uploadingfile"]["name"];

        $size_raw = $_FILES["uploadingfile"]["size"];//File size in bytes

        $size_as_mb = number_format(($size_raw / 1048576), 2);//Convert bytes to Megabytes

        nếu (move_uploaded_file($_FILES["uploadingfile"]["tmp_name"], "$folderPath" . $_FILES["tệp tải lên"]["name"] . "")) {

            //Di chuyển tệp
            echo "$original_file_name tải lên hoàn tất";
        }
    } else {
        echo "Tệp không phải là MP4";
        thoát;
    }
}

Ghi chú. Hãy chắc chắn rằng bạn có một thư mục tải lên,
Bây giờ chúng tôi sẽ thêm một số kiểu CSS để làm cho biểu mẫu có thể hiển thị được
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74


biểu mẫu {
    lợi nhuận. 5% tự động;
    bán kính đường viền. . 3rem;
    phần đệm. 1. 3rem;
    đường viền. #2274ac40 1px rắn;
    chiều rộng. 30%;
    căn chỉnh văn bản. trung tâm;

}
đầu vào {
    chiều rộng. 90%;
    đường viền. 0;
    phần đệm. 20px;
    bán kính đường viền. 6px;
    lề dưới. 10px;
    đường viền. 1px rắn #839af5;
}
.btn {
    chiều rộng. 100%;
    phần đệm. . 5rem;

    đường viền. 0;
    nền. #fe6f27;
    cỡ chữ. 1. 2em;
    màu. #fff;
    text-shadow. 1px 1px 0px rgba( . 40, 0, 0, .4);
    box-shadow. 0px 3px 0px #fe6f27;
    lề trên. 1. 2rem;
}
.btn:hover {
    nền. #00398c;
    màu. #b5b5b5;
    box-shadow. không;
}
.form-control {
    hiển thị. chặn;
    chiều rộng. 100%;
    chiều cao. calc(1. 5em + . 75rem + 2px);
    phần đệm. . 375rem . 75 vòng;
    cỡ chữ. 1rem;
    độ dày của phông chữ. 400;
    chiều cao dòng. 1. 5;
    màu. #d6d8db;
    màu nền. #3c4760;
    clip nền. hộp đệm;
    đường viền. 1px rắn #72a7db;
    bán kính đường viền. . 25 vòng;
    chuyển đổi. màu đường viền . 15 giây vào ra dễ dàng, bóng hộp . 15 giây vào ra;
}
.progress {
    màu nền. #3fee8c;
    vị trí. tương đối;
    lợi nhuận. 20px;
    chiều cao. 1. 2rem;
}
.progress-bar {
    màu nền. #7eeed8;
    chiều rộng. 100%;
    chiều cao. 1. 2rem;
}
tiến trình. -webkit-progress-value {
    nền. #3fee8c;
}
tiến trình. -webkit-progress-bar {
    nền. #1e1e3c;
}
tiến trình. -moz-progress-bar {
    nền. #3fee8c;
}


Sau khi thêm CSS ở trên, biểu mẫu của bạn sẽ giống như ảnh chụp màn hình bên dưới
Hoàn thành mã
Sử dụng mã hoàn chỉnh bên dưới để tải lên tệp video có thanh tiến trình bằng PHP và JavaScript
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<. DOCTYPE html>
<html lang="vi">
<đầu>
    <tiêu đề>Đang tải lên video with a progress bar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta tên='viewport' content='width=device-width, initial-scale=1'>

</đầu>
<nội dung>
<div class="vùng chứa">
    <div class="row text-center">
        <div lớp="col-2"></div>
        <div lớp="col-8">
            <biểu mẫu id="upload_form" enctype="multipart/form-data" method="post">
                        <div lớp="form-group">
                    <đầu vào loại="file" name="uploadingfile" id="uploadingfile">
                </div>
                        <div lớp="form-group">
                    <đầu vào lớp="btn btn-primary" type="button" value="Upload File" name="btnSubmit"
                           onclick="uploadFileHandler()"><
                </div>
                        <div lớp="form-group">
                    <div lớp="progress" id="progressDiv" style="display:none;">
                        <tiến độ id="progressBar" value="0" max="100" style="width:100%; height: 1.2rem;"></tiến độ>
                    </div>
                </div>
                        <div lớp="form-group">
                    <h3 id="status"></h3>
                    <p id="uploaded_progress"></p>
                </div>
            </biểu mẫu>
        </div>
        <div lớp="col-2"></div>
    </div>
</div>
    hàm _(abc) {
    trả lại tài liệu. getElementById(abc);
}
chức năng uploadFileHandler() {
    tài liệu. getElementById('progressDiv').kiểu dáng. hiển thị='chặn';
    var tệp = _("uploadingfile").tệp[0];
    var dữ liệu biểu mẫu = mới FormData();
    dữ liệu biểu mẫu. chắp thêm("tệp tải lên", file);
    var ajax = mới XMLHttpRequest();
    ajax. tải lên. addEventListener("progress", progressHandler, false);
    ajax. addEventListener("load", completeHandler, false);
    ajax. addEventListener("lỗi", errorHandler, false);
    ajax. addEventListener("hủy", abortHandler, false);
    ajax. mở("POST", "upload.php");
    ajax. gửi(dữ liệu biểu mẫu);
}
chức năng progressHandler(sự kiện) {
    var loaded = new Number((event.đã tải / 1048576));//Make loaded a "number" and divide bytes to get Megabytes
    var total = new Number((event.tổng / 1048576));//Make total file size a "number" and divide bytes to get Megabytes
    _("uploaded_progress").innerHTML = "Đã tải lên " + loaded.toPrecision(5) + . " Megabytes of " + total.toPrecision(5);//String output
    var percent = (event.đã tải / sự kiện. tổng) * 100;//Get percentage of upload progress
    _("progressBar").giá trị = Toán học. tròn(phần trăm);//Round value to solid
    _("trạng thái").innerHTML = Toán. vòng(phần trăm) + "% uploaded";//String output
}
function completeHandler(sự kiện) {
    _("trạng thái").innerHTML = sự kiện. mục tiêu. văn bản phản hồi;//Tạo và hiển thị văn bản phản hồi
    _("progressBar").giá trị = 0;/
    tài liệu. getElementById('progressDiv').kiểu dáng. hiển thị = 'none';//Hide progress bar
}
chức năng trình xử lý lỗi(sự kiện) {
    _("trạng thái").innerHTML = "Tải lên không thành công";//Switch status to upload failed
}
hàm abortHandler(sự kiện) {
    _("trạng thái").innerHTML = "Đã hủy tải lên";//Switch status to aborted
}
</body>
</html>

Xong rôi. Bây giờ chỉ cần mở chỉ mục của bạn. php trong trình duyệt của bạn và tải lên tệp video. Bạn sẽ nhận được ảnh chụp màn hình bên dưới khi tải lên video có thanh tiến trình
Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc mở rộng chức năng của tập lệnh này không?
Một chuyên gia về trang web Tutorials có thể làm điều đó cho bạn
Thuê một chuyên gia
gói từ
Cảm ơn bạn đã đọc 🙏, tôi hy vọng bạn thấy Cách tải video lên bằng thanh tiến trình trong hướng dẫn PHP hữu ích cho dự án của bạn. tiếp tục học. Nếu bạn gặp phải bất kỳ vấn đề nào - Tôi ở đây để giải quyết vấn đề của bạn
Xem bản trình diễn
cũng đọc. jQuery để xem trước và xoay hình ảnh trước khi tải lên bằng PHP
Pradeep Maurya
Pradeep Maurya là Nhà thiết kế & Nhà phát triển web chuyên nghiệp và là Người sáng lập “Trang web hướng dẫn”. Anh ấy sống ở Delhi và thích trở thành một người tự lập. Với tư cách là chủ sở hữu, anh ấy đang cố gắng hết sức để cải thiện nền tảng này từng ngày. Niềm đam mê, sự cống hiến và khả năng ra quyết định nhanh chóng của anh ấy nổi bật so với những người khác. Anh ấy là một người đam mê viết blog và viết trên các ấn phẩm như Dzone, e27. đồng

Làm cách nào để tạo thanh tiến trình để chèn dữ liệu trong PHP?

Ở đây chúng tôi sử dụng tập lệnh PHP để xử lý dữ liệu phía máy chủ và đối với phía máy khách, chúng tôi sử dụng Ajax jQuery và Bootstrap. Ajax đã được sử dụng để gửi dữ liệu đến máy chủ, jQuery đã được sử dụng để xác thực dữ liệu biểu mẫu và tiếp tục thực thi chức năng và cuối cùng bootstrap đã được sử dụng để tạo thanh tiến trình.

Làm cách nào để tạo thanh tiến trình động trong PHP?

Liệt kê 9. 3. mỗi { vị trí. tuyệt đối; . 130px; . 18px; . 50%; . 1px 0px 0px 150px; . #FFFFFF; . thanh {vị trí. tuyệt đối; . 132px; . 50%; . 0px 0px 0px -158px; . 0px; . 20px; . #0099FF;

Làm cách nào để hiển thị thanh tiến trình trong khi tải bằng Ajax?

Bạn không thể sử dụng thanh tiến trình vì truy vấn cơ sở dữ liệu không trả về bất cứ thứ gì cho đến khi hoàn tất. Bạn có thể có một hình ảnh động tải đơn giản mặc dù. cảm ơn bạn đã trả lời, bạn có thể hướng dẫn tôi cách làm điều đó không. Bạn có thể hiện/ẩn div chứa hoạt ảnh với các sự kiện ajaxstart và ajaxstop .

Làm cách nào để chèn dữ liệu đăng ký vào cơ sở dữ liệu bằng PHP?

Biểu mẫu đăng ký cơ bản bằng PHP có kết nối cơ sở dữ liệu MySQL .

BƯỚC 1. Tạo cơ sở dữ liệu để chèn giá trị. .

BƯỚC 2. Mã giao diện người dùng, Tạo cấu trúc HTML cho biểu mẫu đăng ký của bạn. .

BƯỚC 3. Đối với kết nối Cơ sở dữ liệu bằng MySQL. .

BƯỚC 4. Cuối cùng tạo một đăng ký

programming php

Làm cách nào để tạo thanh tiến trình chèn dữ liệu trong PHP?

Tải lên video có thanh tiến trình

Tạo chỉ mục. tập tin php

Thêm Ajax JavaScript xử lý tiến trình “thời gian thực”

Tạo tệp upload.php để xử lý tải lên video bằng AJAX

Hoàn thành mã

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc mở rộng chức năng của tập lệnh này không?

gói từ

Làm cách nào để tạo thanh tiến trình để chèn dữ liệu trong PHP?

Làm cách nào để tạo thanh tiến trình động trong PHP?

Làm cách nào để hiển thị thanh tiến trình trong khi tải bằng Ajax?

Làm cách nào để chèn dữ liệu đăng ký vào cơ sở dữ liệu bằng PHP?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội