Tải lên hình ảnh ajax jQuery PHP MySQL

• Như bạn có thể thấy trong hành động biểu mẫu của chúng tôi, chúng tôi đã viết tải lên. php vì vậy chúng tôi cần tạo tải lên. php

1

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

if ( $_SERVER [ 'REQUEST_METHOD'<]=='POST'){

// Lấy tên tập tin thực tế

$name = $_FILES [ 'ảnh']['name'];

// Lấy tên tệp tạm thời được lưu trữ trong thư mục php tmp

$tmp_name = $_FILES [ 'ảnh']['tmp_name'];

//Đường dẫn lưu file trên server

$path = 'uploads/' ;

// kiểm tra file có hay không

nếu (. trống ( $name )){

// Di chuyển tệp đến vị trí tạm thời để tải lên đường dẫn

move_uploaded_file ( $tmp_name , $path.$name );

//Hiển thị thông báo thành công

echo "Tải lên thành công" ;

} khác {

//Nếu file chưa được chọn hiển thị thông báo chọn file

echo "Vui lòng chọn tệp" ;

}

}

• Bây giờ hãy thử chạy dự án của bạn

• Như bạn có thể thấy hình ảnh của tôi đang tải lên trong thư mục. Nhưng đây không phải là cách AJAX vì trang web của chúng tôi đang được chuyển hướng để tải lên. php. Chúng tôi cần tải lên hình ảnh mà không làm mới hoặc chuyển hướng trang hiện tại. Vì vậy, đối với điều này, chúng tôi sẽ sử dụng jQuery AJAX

Ajaxifying Dự án hình ảnh tải lên PHP của chúng tôi

• Tạo một tệp mới có tên là tải lên. js và viết đoạn mã sau

1

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

//Thêm chức năng gửi vào biểu mẫu

$( '#uploadImage' ). gửi ( hàm ( e){

// Ngăn chặn hành vi mặc định của biểu mẫu

// Vì dòng này, biểu mẫu sẽ không làm gì cả. e sẽ không làm mới hoặc chuyển hướng trang

e. ngăn chặn mặc định ();

//Tạo phương thức ajax

$. ajax ({

// Lấy url của uploadphp từ action attr của form

// điều này có nghĩa là phần tử hiện được chọn là biểu mẫu của chúng tôi

url. $( này ). attr ( 'hành động' ),

// Để tải lên tệp, chúng tôi sử dụng yêu cầu đăng

loại. "ĐĂNG" ,

//Tạo dữ liệu từ form

dữ liệu. mới Dữ liệu Biểu mẫu ( này )

// Đặt chúng thành false vì chúng tôi đang gửi yêu cầu nhiều phần

kiểu nội dung. sai ,

bộ đệm. sai ,

processData. sai ,

thành công. chức năng ( dữ liệu ){

// Nếu yêu cầu thành công, chúng tôi sẽ nhận được đầu ra tập lệnh trong biến dữ liệu

//Hiển thị kết quả trong phần tử html của chúng tôi

$( '#msg' ). html ( dữ liệu );

},

lỗi. hàm (){}

});

});

• Như bạn có thể thấy bên trong thành công, chúng tôi đang hiển thị kết quả trong một phần tử html có id msg. Vì vậy, chúng ta cần tạo một phần tử html có id msg trong tệp html của mình. Và chúng ta cần đưa tập lệnh js này vào tệp html của mình
• Vì vậy, chỉ số sửa đổi. html sẽ là

1

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

<. LOẠI TÀI LIỆU html>

<đầu>

<. -- bao gồm jquery -->