Cách thức hoạt động của tệp HTML?

Question

Tôi không hỏi cách tải lên tệp.

Tôi chỉ tự hỏi làm cách nào, khi bạn nhấp vào phần tử tệp html, nó hiển thị thư mục hệ thống cục bộ .

Chúng ta có thể làm điều đó với bất kỳ phần tử html nào khác như nút và đầu vào không? Nếu không, những gì là đặc biệt về các tập tin? Làm thế nào nó hiển thị các thư mục hệ thống?

Answer 1

Phần tử html duy nhất có thể cung cấp cho bạn quyền truy cập vào hệ thống tệp là input (loại tệp), vì trình duyệt cho phép trình duyệt mở hộp thoại, chỉ trình duyệt có thể thực hiện điều đó, không có cách nào trong API tập lệnh bất kỳ để truy cập các thư mục hệ thống. Vì lý do bảo mật, không có cách nào khác để truy cập hệ thống tập tin theo cách đó (thông qua một hộp thoại); lưu dữ liệu cục bộ thông qua HTML5, buộc hộp thoại lưu tải xuống hoặc hộp thoại in lại hoạt động được kiểm soát bởi trình duyệt nhưng bạn có thể gọi chúng từ trang web.

Answer 2

THÔNG BÁO: Tôi sẽ không mô tả chính xác cách trình duyệt xử lý với đầu vào tệp, nhưng tôi sẽ liệt kê từng bước những gì tôi đã thực hiện và kết quả của nó để hiểu đầu vào tốt hơn; Mặc dù nó có thể không giúp sử dụng để hiểu cơ chế bên trong của nó, nó sẽ giúp bạn không sợ hãi hay bối rối khi làm việc với nó. Trong các thử nghiệm của tôi, tôi sẽ sử dụng HTML, Apache + PHP với CakePHP, Firefox và Chrome để so sánh cách nó được sử dụng trong lập trình thế giới thực. Hãy bắt đầu :)

1. Tệp tải đầu vào vào bộ nhớ khi chọn tải tệp lên?
   • Không chỉ lưu đường dẫn tệp. Tôi sử dụng màn hình quá trình sau đó chọn tập tin gần 200Mb, cả chrome và firefox không ăn nhiều bộ nhớ hơn, hoặc đọc đĩa; Tôi thậm chí có thể xóa tệp này trước khi nhấp vào nút gửi.
2. Cách mã hóa của hiệu ứng biểu mẫu cho dữ liệu nhập?
   • application/x-www-form-urlencoded và text/plain dường như bỏ qua đầu vào tệp; chỉ multipart/form-data kích hoạt trình duyệt để đọc tệp từ đường dẫn tệp và gửi tệp đó. (để xem thêm cách hoạt động của mã nguồn tham chiếu tại đây: What does enctype='multipart/form-data' mean?)
3. Phía máy chủ làm gì khi nhận dữ liệu?
   • Như đã nói ở trên, tôi chỉ quan tâm đến PHP, và những gì PHP cung cấp cho chúng tôi là:

// Upload 1 file Array (
    [<input name in file input tag>] => Array 
     (
      [name] => <same as the name of selected to upload file> 
      [type] => <type> 
      [tmp_name] => <path of file in tmp folder will explain below> 
      [error] => <0: error, maybe because of file size too large, 1: success> 
      [size] => <size of file in bytes> 
     )  
) 
// Upload multiple files (input name must be <someName>[]) 
Array 
(
    [<input name in file input tag>] => Array 
     (
      [name] => [<array of name>] 
      [type] => [<array of type>] 
      [tmp_name] => [<array of tmp path>] 
      [error] => [<array of error>] 
      [size] => [<array of size>] 
     ) 

) 

trình duyệt gửi yêu cầu (chứa tập tin) để Apache; Apache chuyển tiếp yêu cầu tới PHP; PHP trích xuất tệp từ yêu cầu và lưu vào tệp tại thư mục tmp mà chúng ta có thể thấy trong [tmp_name]. Vào cuối tệp PHP, nó loại bỏ tạm thời, vì vậy chúng tôi phải sử dụng move_uploaded_file trước khi tập lệnh kết thúc nếu cần lưu tệp.

4. Làm thế nào để CakePHP thực hiện với tệp được tải lên?
   • Nó giống như những gì PHP làm chỉ cần đặt nó trong $ this-> yêu cầu và chúng ta phải đảm bảo rằng tên của họ phải là dữ liệu [] hoặc đơn giản chỉ cần sử dụng $ this-> Form-> hình thức ("")
5. Tôi có thể xem trước hình ảnh hoặc làm điều gì đó với tệp đã chọn trước khi gửi nó lên máy chủ không?
   • Có. Bạn có thể nghe trên onchange sự kiện của đầu vào tệp; Thông qua DOM, chúng ta có thể truy cập FileList sau đó từ nó, chúng ta có thể truy cập trong File; Với FileReader (hỗ trợ trong các trình duyệt gần như hiện tại), chúng tôi có thể đọc nó như là url dữ liệu ... (Có thể xem chi tiết ở đây: how to preview a image before and after upload?)