Làm cách nào tôi có thể tải ảnh lên bằng HTML?

Trong bài viết này, chúng ta sẽ xem cách tạo nút tải tệp lên để tải tệp lên bằng HTML. Như chúng ta biết, tải lên tệp là một khía cạnh quan trọng trong biểu mẫu HTML đơn giản. Nút tải lên tệp được sử dụng để tải lên ảnh người dùng hoặc bất kỳ loại tệp nào trong biểu mẫu.  

Tiếp cận. Để tải tệp lên bằng HTML, chúng tôi sẽ

  • create a HTML document that contains an tag.
  • sử dụng thuộc tính loại được đặt thành giá trị “tệp”

cú pháp

Thí dụ

HTML




<html>

 

<head>

    <0_______20_______10>

 

    5

    <8>

<0_______21_______1

<2______21_______3

<0_______21_______5

 

<0_______21_______7

<0_______21_______9

<2_______22_______1

<0_______21_______5

 

<0_______22_______5

<2______22_______7

<0_______21_______5

    >1_______20_______8>

>1head>

 

<>8>

    <<2<3<2>

    <<8>

<0head1

<0_______25_______3

    >1_______21_______8>

    

    <>1>2>1>

    21_______>7 >8>9    0     1>9    3     4    5     6    5     8

    

    21_______>7 >8>9<5 <6>9<5     8

>1>8>

 

>1html>

đầu ra. Bạn có thể thấy rằng sau khi tệp được tải lên, tên của tệp được hiển thị ở phía trước nút.  

Việc 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ệp HTML tải lên có thể được sử dụng để cho phép người dùng tải hì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 về tải lên tệp và cách thiết lập tệp 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ề mã hóa 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 đi sâu vào nó

Luckily for us, HTML provides a fairly simple solution which enables us to upload files, the element! Taking a look at this, a limited example of how we’d code an upload file button in HTML could look like this:

<label for="photo">Choose a photo!label>

<input 
  type="file"
  id="photo" 
  name="photo"
  accept="image/*">

Bạn sẽ thấy những điều sau đây nếu bạn chạy một trang HTML trên máy chủ localhost

Làm cách nào tôi có thể tải ảnh lên bằng HTML?
Nút màu xám chọn và tải tệp lên trong HTML

Nhấp vào nút Chọn tệp sẽ hiển thị tùy chọn chọn tệp của 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ứ khác ngoài Chọn tệp, chúng tôi có thể làm điều gì đó như

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>

Đ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 tệp đến máy chủ của mình sau khi tệp được chọn? . 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 đề cập đến các loại Tập lệnh đó trong bài đăng này. Tuy nhiên, mã để liên kết với Tập lệnh sẽ giống như thế này

<form action="yourScript">
  <input type="file" id="myFile" name="filename">
  <input type="submit">
form>

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 để làm điều này thường dựa vào CSS

Đây là một cách để làm điều đó, 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

input {
  opacity: 0;
  z-index: -1;
  position: absolute;
}

  • <span>
      File Upload
      <input 
        type="file"
        id="photo" 
        name="photo"
        accept="image/png, image/jpeg">
    span>
    4 — làm cho đầu vào minh bạch
  • <span>
      File Upload
      <input 
        type="file"
        id="photo" 
        name="photo"
        accept="image/png, image/jpeg">
    span>
    5 - đảm bảo phần tử nằm bên dưới bất kỳ thứ gì khác trên trang
  • <span>
      File Upload
      <input 
        type="file"
        id="photo" 
        name="photo"
        accept="image/png, image/jpeg">
    span>
    6 - đảm bảo rằng phần tử không can thiệp vào phần tử anh chị em

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

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

________số 8_______

input {
  visibility: hidden;
}

Nên tránh các tùy chọn này vì chúng không hoạt động tốt với trình đọc trợ năng. độ mờ. 0 là phương pháp ưa thích

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

Như mọi người có thể đ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ể đưa đầu vào vào các thẻ

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
7 để 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à các thẻ
<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
8

Chúng ta hãy cố gắng này

<input type="file" name="file" id="file" class="myclass" />
<label for="file">Choose a filelabel>

.myclass + label {
  font-size: 2em;
  font-weight: 700;
  color: white;
  background-color: green;
  border-radius: 10px;
  display: inline-block;
}

.myclass:focus + label,
.myclass + label:hover {
  background-color: purple;
}

Điều này sẽ cho chúng ta một nút màu xanh lá cây sẽ chuyển sang màu tím khi chúng ta di con trỏ chuột lên nó, nó sẽ trông như thế này

Làm cách nào tôi có thể tải ảnh lên bằng HTML?
Chọn tập tin nút màu xám và màu xanh lá cây

Tuy nhiên, bây giờ chúng tôi đang trình bày với một vấn đề. 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)?

Thêm CSS sau vào mã CSS trước đó

.myclass {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

bùng nổ. Vấn đề được giải quyết

Làm cách nào tôi có thể tải ảnh lên bằng HTML?
Chọn nút tệp màu xanh lá cây

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 bao gồm siêu dữ liệu tệp, có thể được đọc sau khi người dùng tải (các) tệp đã nói lên. Siêu dữ liệu tệp có thể bao gồm những thứ như loại MIME của tệp (loại phương tiện đó là gì), 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ể lấy siêu dữ liệu của tệp — điều này sẽ liên quan đến một số JavaScript

<input type="file" multiple onchange="showType(this)">

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
0

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, hộp bật lên 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 trong đó một người 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)

Limiting accepted file types is quite easy — to do this we make use of the accept attribute within the element. An example of how we would do this is:

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
1

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 thực hiện

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
2

Có nhiều cách để bạn 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 File Uploader tiện dụng. Trình tải lên tệp Uploadcare phản hồi nhanh, sẵn sàng cho thiết bị di động và dễ triển khai. Để biết chi tiết đầy đủ về Trình tải lên tệp của chúng tôi, vui lòng truy cập https. // dịch vụ tải lên. com/docs/uploads/file-uploader/

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

<span>
  File Upload
  <input 
    type="file"
    id="photo" 
    name="photo"
    accept="image/png, image/jpeg">
span>
3

Và bạn có nó rồi đấy. Đó 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ử thực hiện những gì chúng ta đã học được trong một dự án

Làm cách nào để chèn ảnh vào HTML?

Thẻ HTML . Hình ảnh không được chèn kỹ thuật vào một trang web; . Thẻ

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

Kiểu CSS chọn nguồn hình ảnh bằng thuộc tính hình nền. .
Mở biểu định kiểu trang web của bạn bằng trình soạn thảo HTML hoặc trình soạn thảo văn bản
Dán đoạn mã sau vào trang tính để tạo kiểu mới. .
Thay thế "đường dẫn" bằng URL của hình ảnh trong trang web

Chúng tôi có thể thêm hình ảnh JPG vào HTML không?

Để chèn hình ảnh vào HTML, hãy sử dụng thẻ hình ảnh và bao gồm thuộc tính nguồn và alt . Giống như bất kỳ phần tử HTML nào khác, bạn sẽ thêm hình ảnh vào phần nội dung của tệp HTML của mình. Phần tử hình ảnh HTML là một “phần tử trống”, nghĩa là nó không có thẻ đóng.