Tìm hiểu cách tải tệp lên máy chủ bằng HTML! Ví dụ về mã cho các nút tải lên – chỉ cần chỉnh sửa cho dự án của bạn.

Bạn đang xem : Tải lên tệp biểu mẫu html

Các trang web hoặc ứng dụng cho phép người dùng tải tệp lên dưới dạng một tính năng hoặc một phần của tính năng là điều khá phổ biến. Ví dụ: tải lên tệp HTML có thể được sử dụng để cho phép người dùng tải ảnh đại diện lên hoặc cho phép nhóm nội bộ tải ảnh sản phẩm lên trang web hoặc ứng dụng. Trong hướng dẫn này, chúng tôi sẽ xem xét ngắn gọn quá trình tải lên tệp và cách thiết lập điều này trong mã hóa của bạn. Hướng dẫn này giả định một số kiến ​​thức và hiểu biết về lập trình và phát triển web. Bài đăng này có nghĩa là một tổng quan ngắn gọn. Hãy bắt đầu!

Thật may mắn cho chúng tôi, HTML cung cấp một giải pháp khá đơn giản cho phép chúng tôi tải lên các tệp, & lt; input & gt; yếu tố! Hãy xem phần này, một ví dụ hạn chế về cách chúng tôi viết mã nút tải lên tệp trong HTML có thể trông như thế này:

  

& lt;

nhãn

cho

= < / p>

"

ảnh

"

& gt;

Chọn một ảnh!

& lt; /

nhãn

& gt;

& lt;

đầu vào

loại

=

"

tệp

"

id

=

"

ảnh

"

tên

=

"

ảnh

"

accept

=

"

image / *

"

& gt;

Bạn sẽ thấy thông tin sau nếu chạy trang HTML trên máy chủ localhost:

Nút chọn và tải tệp màu xám lên trong HTML
Chọn và tải tệp lên nút màu xám trong HTML

Nhấp vào nút Chọn tệp sẽ hiển thị tùy chọn chọn tệp trong Hệ điều hành của bạn.

Nếu chúng tôi muốn tùy chỉnh văn bản trong nút thành một thứ gì đó khác với Chọn tệp, chúng tôi có thể làm như sau:

  

& lt;

span

& gt;

Tải lên tệp

& lt;

đầu vào

loại

=

"

tệp < p class = "dấu chấm câu"> "

id

=

"

ảnh

"

tên

=

"

ảnh

"

accept

=

"

hình ảnh / png, image / jpeg

"

& gt;

& lt; /

span

& gt;

Điều đó giúp chúng tôi có nút và khả năng chọn tệp. Làm cách nào để chúng tôi chuyển hướng tệp đến máy chủ của mình sau khi nó được chọn? Để điều hướng tệp, chúng tôi sẽ làm cho nút này trở thành một phần của biểu mẫu, sau đó sẽ kích hoạt Tập lệnh (có thể là JavaScript, PHP, v.v.). Sau đó, logic trong Tập lệnh này sẽ cho máy chủ biết phải làm gì với tệp sau khi tệp được tải lên. Chúng tôi sẽ không xem xét những loại Scripts đó trong bài đăng này. Tuy nhiên, mã để liên kết đến Tập lệnh sẽ trông giống như sau:

  

& lt;

biểu mẫu

action

=

"

yourScript

"

& gt;

& lt;

đầu vào

loại

=

"

tệp

"

id

=

"

myFile

"

name

=

"

tên tệp

"

& gt;

& lt;

đầu vào

loại

=

"

đệ trình

"

& gt;

& lt; /

biểu mẫu

& gt;

Trong một số trường hợp, bạn có thể muốn ẩn nút tải tệp lên. Cách thực hiện điều này thường dựa vào CSS.

Đây là một cách để thực hiện, chúng tôi có thể đính kèm CSS vào đầu vào của mình và thực hiện như sau:

  

độ mờ

:

0

;

z-index

:

-1

;

vị trí

:

tuyệt đối

;

  • opacity: 0 - làm cho đầu vào trong suốt.
  • z-index: -1 - đảm bảo phần tử nằm bên dưới bất kỳ phần tử nào khác trên trang.
  • vị trí: tuyệt đối - đảm bảo rằng phần tử đó không ảnh hưởng đến các phần tử anh em.

Chúng tôi sẽ đặt phần tử này làm CSS mặc định Sau đó, chúng tôi sẽ viết một Tập lệnh ngắn để thay đổi CSS sau khi ai đó chọn tệp , để người dùng có thể thấy nút Gửi chẳng hạn.

Có một số tùy chọn CSS tiềm năng khác:

  

hiển thị

:

không

Và:

  

khả năng hiển thị

:

ẩn

Những tùy chọn này phải tránh, vì chúng không hoạt động tốt với trình đọc hỗ trợ tiếp cận. Độ mờ: 0 là phương pháp được ưa thích.

Rất có thể chúng tôi muốn thay đổi giao diện của các nút tải tệp lên từ các nút mặc định màu xám khá xấu xí sang một thứ gì đó dễ nhìn hơn một chút .

Như người ta sẽ đoán, tùy chỉnh nút liên quan đến CSS.

Chúng tôi biết rằng chúng tôi có thể đặt đầu vào trong & lt; span & gt; & lt; / span & gt; để tùy chỉnh văn bản xuất hiện trên nút. Một phương pháp khác là thẻ & lt; label & gt; & lt; / label & gt; .

Hãy hãy thử cái này!

  

& lt;

đầu vào

loại

=

"

tệp

"

tên

< p class = "token attr-value">

=

"

tệp

"

id

=

"

tệp

"

lớp < / p>

=

"

myclass

"

/ & gt;

& lt;

nhãn

cho

=

"

tệp

"

& gt;

Chọn tệp

& lt; /

nhãn

& gt;

  

. myclass + label

{

font-size

:

2em

;

font-weight

:

700

;

color

:

white

;

background-color

:

green

;

bán kính đường viền

:

10px

;

display

:

inline-block

;

}

. myclass: focus + label, .myclass + label: hover

{

background-color

:

Purple

;

}

Nếu bạn đang tìm kiếm một nút màu xanh lục sẽ chuyển sang màu tím khi bạn di con trỏ chuột qua nó, nó sẽ giống như cái này:

Sc-7x69l3-0 iWsarG-gatsby-resp-image-image
Chọn các nút màu xám và xanh lục cho tệp

Tuy nhiên, chúng tôi đang gặp sự cố! Làm cách nào để loại bỏ tùy chọn nhập mặc định ở bên trái (vì chúng tôi chỉ muốn có một nút tùy chỉnh)? Hãy nhớ cách chúng ta đã học cách ẩn các nút trước đó? Bây giờ chúng ta có thể áp dụng điều đó vào thực tế.

Thêm mã CSS sau:

  

. myclass

{

width

:

0,1px

;

height

:

0,1px

;

độ mờ

:

0

;

tràn

:

ẩn

;

vị trí

:

tuyệt đối

;

z-index

:

-1

;

}

Bùng nổ! Vấn đề đã được giải quyết:

Sc-7x69l3-0 iWsarG gatsby-resp-image-image
Nút chọn tệp màu xanh lục

Có thể có những trường hợp chúng tôi muốn thu thập thông tin về các tệp mà người dùng đang tải lên máy chủ của chúng tôi. Mọi tệp đều bao gồm siêu dữ liệu tệp, có thể đọc được sau khi người dùng tải lên (các) tệp đó. Siêu dữ liệu tệp có thể bao gồm những thứ như kiểu MIME của tệp (đó là loại phương tiện nào), tên tệp, kích thước, ngày tệp được sửa đổi lần cuối ... hãy xem nhanh cách chúng tôi có thể kéo siêu dữ liệu tệp lên — điều này sẽ liên quan đến một số JavaScript.

  

& lt;

đầu vào

loại

< p class = "token attr-value">

=

"

tệp

"

nhiều

onchange < / p>

=

"

showType

(

cái này

)

"

& gt ;

  

function

showType

(

fileInput

)

{

const

tệp

=

fileInput

.

tệp

;

cho

(

const

i

=

0

;

i

& lt; tệp

.

length

;

i

++

)

{

const

name

=

tệp

[

i

]

.

name

;

const

type

=

tệp

[

i

]

.

type

;

cảnh báo

(

"Tên tệp:"

+

tên

+

", Loại: "

+

loại

)

;

}

}

Nếu chúng tôi chạy mã này, chúng tôi sẽ thấy nút Chọn tệp . Khi chúng tôi chọn một tệp từ thiết bị của mình, một hộp bật lên của trình duyệt sẽ xuất hiện. Cửa sổ bật lên của trình duyệt sẽ thông báo cho chúng tôi về tên tệp và loại tệp. Tất nhiên, có logic mà chúng tôi có thể viết để thay đổi loại siêu dữ liệu tệp mà bạn thu thập và điều gì xảy ra với nó, tùy thuộc vào nhu cầu của chúng tôi.

Tất nhiên, chúng tôi có thể nghĩ đến nhiều trường hợp mà một muốn giới hạn loại tệp mà người dùng có thể chọn tải lên máy chủ của bạn (cân nhắc bảo mật trong số nhiều lý do cần xem xét).

Việc giới hạn các loại tệp được chấp nhận khá dễ dàng — để làm được điều này, chúng tôi tận dụng thuộc tính accept trong & lt; input & gt; yếu tố. Ví dụ về cách chúng tôi thực hiện việc này là:

  

& lt;

đầu vào

type

=

" tệp

"

id

=

"

ảnh

"

tên

=

"

ảnh

"

accept

=

"

.jpg, .jpeg, .png

"

& gt;

< / p>

Chúng tôi có thể chỉ định định dạng tệp cụ thể nào bạn muốn chấp nhận, giống như chúng tôi đã làm ở trên hoặc chúng tôi có thể chỉ cần làm:

  accept =" image / * " 

Có nhiều cách để bạn cũng có thể giới hạn định dạng và loại tệp cho các loại tệp khác, nhưng chúng tôi sẽ không đề cập đến mọi thứ ở đây.

Uploadcare có tính năng Trình tải tệp lên tiện dụng. Trình tải lên tệp Uploadcare đáp ứng, sẵn sàng cho thiết bị di động và dễ triển khai. Để biết đầy đủ chi tiết về Trình tải lên tệp của chúng tôi, vui lòng truy cập https://uploadcare.com/docs/uploads/file-uploader /

Sau khi bạn nhận được các khóa Uploadcare, cách nhanh nhất để triển khai Trình tải lên tệp là thông qua CDN như sau:

  

& lt;

script

& gt;

UPLOADCARE_PUBLIC_KEY

=

'demopublickey'

;

& lt; /

script

& gt;

& lt;

script

src

=

"

https: // ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js

"

bộ ký tự < / p>

=

"

utf-8

"

& gt;

& lt; /

script

& gt;

Và bạn có nó! Đó là tổng quan ngắn gọn về những điều cơ bản của việc tải tệp lên máy chủ bằng HTML. Bây giờ hãy ra khỏi đó và thử triển khai những gì chúng ta đã học được trong một dự án!


Xem thêm những thông tin liên quan đến chủ đề tải lên tệp biểu mẫu html

HTML Tutorial #10: Multiple File Upload Form

alt

  • Tác giả: Devmanual
  • Ngày đăng: 2012-02-10
  • Đánh giá: 4 ⭐ ( 4479 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Download the source:
    https://www.yaggler.com/post/1606489685yUcAa

    In this tutorial we will be covering the multiple file upload form. By adding an additional attribute name of "multiple" and attribute value of "multiple", we are able to upload multiple files

    Startup and Technology Networking:
    https://www.yaggler.com/

    Yaggler is a global startup and technology networking platform where people and technology companies from early-stage to fortune 500 connect. Post or find jobs, internships, resumes, cofounders, companies raising capital, tools / services, technology solutions, and more. All posts are user-submitted and go live instantly.

Hướng dẫn sử dụng Google forms cho phép người dùng tải tài liệu trực tiếp lên Google driver

  • Tác giả: tvcntt.hunre.edu.vn
  • Đánh giá: 4 ⭐ ( 2688 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thêm tính năng đính kèm file cho form liên hệ sử dụng plugin Contact Form 7

  • Tác giả: ngocnx.com
  • Đánh giá: 3 ⭐ ( 2273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CF7 là một plugin tạo form liên hệ khá mạnh, tuy nhiên mặc định nó không hỗ trợ các bạn đính kèm file. Hãy giúp CF7 có thêm khả năng này.

HTML: Mã hoá URL và biểu mẫu nhiều phần

  • Tác giả: nordiccoder.com
  • Đánh giá: 5 ⭐ ( 2258 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tải lên tệp trong ứng dụng khởi động mùa xuân

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 8062 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tải lên tệp là một trong những thao tác phổ biến nhất trong ứng dụng web. Trong bài này, chúng ta sẽ xem xét cách tải tệp lên từ trang HTML và sao chép tệp đó vào hệ thống tệp trên máy chủ.…

Gửi và lưu dữ liệu biểu mẫu

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 6906 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tải lên tệp với PHP – Upload file

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 8471 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tải lên tệp với PHP – Upload file - Lập Trình Từ Đầu 2 PHP Nâng Cao

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Từ khóa được bảo vệ bằng Java - những gì được bảo vệ trong java

By ads_php