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

Xin chào các bạn, hôm nay chúng ta sẽ học upload image lên server bằng jQuery AJAX. Vì vậy, hãy bắt đầu Hướng dẫn tải lên hình ảnh PHP của chúng tôi

Những gì chúng ta sẽ sử dụng trong Hướng dẫn tải lên hình ảnh PHP này?

• Máy chủ Wamp/Xampp (Tôi đang sử dụng windows)
• Sổ tay ++

Tạo biểu mẫu HTML để tải lên hình ảnh

• Trước tiên, chúng tôi cần một Biểu mẫu HTML từ đó chúng tôi có thể tải hình ảnh lên
• Vì vậy, hãy truy cập thư mục gốc của máy chủ của bạn (htdocs cho xampp và www cho wamp, tôi đang sử dụng máy chủ wamp)
• Tạo một thư mục mới cho dự án của bạn (Tôi đã tạo UploadImage)
• Ở đây chúng ta sẽ tạo một biểu mẫu. Tạo một tệp mới có tên là chỉ mục. html 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

 

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

 

<�đầu>

Tải hình ảnh lên bằng AJAX

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

src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'>

<. -- Tạo form upload ảnh -->

< a> id

='uploadImage'hành động< . php'phương thức='post'enctype< span>id='uploadImage' action='upload.php' method='post' enctype='multipart/form-data'>

<�đầu vào loại='tệp'tên< type='file' name='photo' />

Tải tệp lên

 

• Hãy thử chạy dự án của bạn (Đảm bảo rằng máy chủ của bạn đang chạy). Trong trường hợp của tôi, dự án này sẽ chạy trong localhost/UploadImage

mục lục. html

• 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

Hướng dẫn tải lên hình ảnh PHP

• 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>

Tải hình ảnh lên bằng AJAX

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

src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'>

<. -- Tạo form upload ảnh -->

< a> id

='uploadImage'hành động< . php'phương thức='post'enctype< span>id='uploadImage' action='upload.php' method='post' enctype='multipart/form-data'>

<�đầu vào loại='tệp'tên< type='file' name='photo' />

Tải tệp lên

<. -- phần tử p có id msg để hiển thị thông báo thành công -->

< a>

id='msg'>< id='msg'>

<. -- bao gồm tải lên. tập lệnh js -->

src='upload.js'>

 

 

• Bây giờ hãy chạy dự án của bạn và bạn sẽ thấy kết quả sau

Hình ảnh tải lên PHP – Đầu ra

• Bạn cũng có thể tải xuống Tập lệnh tải lên tệp PHP của tôi

Nhận tập lệnh hình ảnh tải lên PHP này

[id tải xuống=”1327″]

Vì vậy, đó là tất cả cho Hướng dẫn tải lên hình ảnh PHP này các bạn. Vui lòng để lại nhận xét của bạn nếu có bất kỳ rắc rối hoặc nhầm lẫn nào. Cảm ơn bạn 🙂

Belal Khan

Xin chào, tên tôi là Belal Khan và tôi là Chuyên gia phát triển Google (GDE) cho Android. Niềm đam mê giảng dạy đã khiến tôi tạo blog này. Nếu bạn là Nhà phát triển Android hoặc bạn đang tìm hiểu về Phát triển Android, thì tôi có thể giúp bạn rất nhiều với Mã hóa đơn giản

Làm cách nào để tải lên hình ảnh trong jQuery AJAX và PHP?

Làm cách nào để chèn hình ảnh vào cơ sở dữ liệu MySQL bằng Ajax PHP?

Làm cách nào để tải lên nhiều tệp hình ảnh bằng jQuery ajax và PHP?

Làm cách nào để tải tệp lên bằng Ajax jQuery?