Tải lên hình ảnh php w3schools

Tải lên tệp Ajax

Nhà phát triển có thể thực hiện tải tệp dựa trên Ajax lên máy chủ bằng JavaScript theo năm bước

1. Phần tử biểu mẫu đầu vào HTML5 phải được đưa vào trang web hiển thị trong trình duyệt của khách hàng;
2. Một phương thức JavaScript phải được mã hóa để bắt đầu tải lên tệp dựa trên Ajax không đồng bộ;
3. Một thành phần phải tồn tại trên máy chủ để xử lý tệp tải lên và lưu tài nguyên cục bộ;
4. Máy chủ phải gửi phản hồi tới trình duyệt cho biết quá trình tải lên tệp JavaScript đã thành công;
5. Trình duyệt của khách hàng phải cung cấp phản hồi dựa trên Ajax cho biết tệp đã tải lên thành công

Trong ví dụ này, mục tiêu tải lên tệp JavaScript là Máy chủ web Apache. Do đó, thành phần phía máy chủ xử lý yêu cầu Ajax sẽ được viết bằng PHP. Nếu máy chủ Tomcat hoặc Jetty là mục tiêu tải lên, nhà phát triển có thể viết mã trình tải lên dựa trên Java ở phía máy chủ

Thẻ tệp HTML5

HTML5 đã giới thiệu một loại trường biểu mẫu đầu vào mới có tên tệp. Khi một trình duyệt gặp thẻ này, nó sẽ hiển thị một bộ chọn tệp đầy đủ chức năng trên trang web. Khi được kết hợp với thẻ nút HTML5 có thể kích hoạt phương thức JavaScript, hai phần tử này đại diện cho các phần tử đánh dấu bắt buộc để bắt đầu quá trình tải lên tệp JavaScript và Ajax

Các thẻ HTML5 sau đây cung cấp các thành phần bắt buộc để thêm bộ chọn tệp và nút tải lên vào bất kỳ trang web nào

 Upload 

Nút khởi động một phương thức có tên uploadFile[], chứa logic tải lên tệp JavaScript

async function uploadFile[] {
    let formData = new FormData[];           
    formData.append["file", fileupload.files[0]];
    await fetch['/upload.php', {
      method: "POST", 
      body: formData
    }];    
    alert['The file has been uploaded successfully.'];
}

Logic tải lên tệp JavaScript

Thẻ script ở trên không chứa gì ngoài JavaScript thuần túy. Không có jQuery hay Dojo nào được đưa vào hỗn hợp và logic rất đơn giản

• Tạo đối tượng FormData để chứa thông tin gửi đến máy chủ;
• Thêm tệp đã chọn sẽ được tải lên đối tượng FormData;
• Gọi tài nguyên phía máy chủ không đồng bộ để xử lý tải lên;
  • Tài nguyên phía máy chủ được gọi thông qua phương thức POST
  • Tài nguyên phía máy chủ được chuyển qua FormData chứa tệp
  • Trong ví dụ này, tài nguyên phía máy chủ có tên là tải lên. php
• Khi được thông báo rằng tải lên tệp JavaScript thành công, hãy gửi cảnh báo dựa trên Ajax cho khách hàng

Tất cả logic HTML và JavaScript sẽ được chứa trong một tệp duy nhất có tên trình tải lên. html. HTML hoàn chỉnh trông như sau

 
 
  
   Ajax JavaScript File Upload Example  
  
 
  
   
   Upload 

  
  
  async function uploadFile[] {
  let formData = new FormData[]; 
  formData.append["file", fileupload.files[0]];
  await fetch['/upload.php', {
    method: "POST", 
    body: formData
  }]; 
  alert['The file has been uploaded successfully.'];
  }
  

  

Xử lý tải lên tệp Apache

Các thành phần tải lên tệp JavaScript bắt buộc

Khi xảy ra quá trình tải lên tệp JavaScript không đồng bộ, phải tồn tại một thành phần phía máy chủ để xử lý và lưu trữ tệp đến. Vì ví dụ này sử dụng Máy chủ HTTP Apache [AHS] và vì PHP là ngôn ngữ của AHS nên nó yêu cầu tệp có tên tải lên. php chứa một tập lệnh PHP nhỏ để lưu tệp đến vào thư mục có tên là tải lên

Tập lệnh PHP cũng đơn giản. Nó lấy tên của tệp đang được tải lên, sau đó tạo một vị trí trong thư mục có tên là tải lên để lưu tệp. Phương thức move_uploaded_file của PHP sau đó được sử dụng để lưu tệp đã tải lên vào vị trí mới này

Chạy ví dụ tải tệp JavaScript lên

Các tệp được sử dụng trong ví dụ này, cùng với thư mục có tên tải lên, phải được thêm vào thư mục htdocs của AHS. Khi khách hàng truy cập trình tải lên. html thông qua trình duyệt, máy khách sẽ có thể tải tệp lên máy chủ bằng Ajax và JavaScript thuần túy

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

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

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

Làm cách nào tôi có thể tải lên hình ảnh từ một URL trong PHP?