W3Schools được tối ưu hóa cho việc học và đào tạo. Ví dụ có thể được đơn giản hóa để cải thiện việc đọc và học tập. Hướng dẫn, tài liệu tham khảo và ví dụ được xem xét liên tục để tránh lỗi, nhưng chúng tôi không thể đảm bảo tính chính xác đầy đủ của tất cả các nội dung. Trong khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng, cookie và chính sách bảo mật của chúng tôi.
Bản quyền 1999-2022 bởi dữ liệu refsnes. Đã đăng ký Bản quyền. W3Schools được cung cấp bởi W3.CSS. W3Schools is Powered by W3.CSS.
❮ thuộc tính loại HTML
Thí dụ
Xác định trường chọn tệp:
Chọn một tập tin:
Hãy tự mình thử »
Định nghĩa và cách sử dụng
<inputtype="file"accept="image/*,.pdf"/>
4 xác định trường chọn tệp và nút "Duyệt" để tải lên tệp.
Để xác định trường chọn tệp cho phép chọn nhiều tệp, hãy thêm thuộc tính
<inputtype="file"accept="image/*,.pdf"/>
5.
Mẹo: Luôn thêm thẻ
<inputtype="file"accept="image/*,.pdf"/>
6 cho các thực tiễn tiếp cận tốt nhất! Always add the
<inputtype="file"accept="image/*,.pdf"/>
6 tag for best accessibility practices!
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.
Thuộc tính
gõ = "tệp"
1.0
Đúng
1.0
1.0
1.0
Cú pháp
❮ thuộc tính loại HTML
<inputtype="file"accept="image/*,.pdf"/>
7 Các thành phần với
<inputtype="file"accept="image/*,.pdf"/>
8 Hãy để người dùng chọn một hoặc nhiều tệp từ bộ lưu trữ thiết bị của họ. Sau khi được chọn, các tệp có thể được tải lên máy chủ bằng cách sử dụng biểu mẫu hoặc thao tác bằng mã JavaScript và API tệp.
<inputtype="file"accept="image/*,.pdf"/>
8 let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and
the File API.
Thử nó
Giá trị
Thuộc tính
<inputtype="file"accept="image/*,.pdf"/>
9 của tệp đầu vào chứa một chuỗi đại diện cho đường dẫn đến (các) tệp đã chọn. Nếu chưa chọn tệp, giá trị là một chuỗi trống (
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
0). Khi người dùng đã chọn nhiều tệp,
<inputtype="file"accept="image/*,.pdf"/>
9 thể hiện tệp đầu tiên trong danh sách các tệp họ đã chọn. Các tệp khác có thể được xác định bằng thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
2 của đầu vào.
Thuộc tính bổ sung
Ngoài các thuộc tính phổ biến được chia sẻ bởi tất cả các phần tử
<inputtype="file"accept="image/*,.pdf"/>
7, các đầu vào loại
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
4 cũng hỗ trợ các thuộc tính sau.
Chấp nhận
Giá trị thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 là một chuỗi xác định các loại tệp mà đầu vào tệp sẽ chấp nhận. Chuỗi này là một danh sách được phân tách bằng dấu phẩy của các nhà xác định loại tệp duy nhất. Bởi vì một loại tệp nhất định có thể được xác định theo nhiều cách, nên việc cung cấp một tập hợp các nhà xác định loại kỹ lưỡng khi bạn cần các tệp có định dạng nhất định.unique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.
Chẳng hạn, có một số cách có thể xác định được các tệp Microsoft Word, do đó, một trang web chấp nhận các tệp Word có thể sử dụng
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
7 là một chuỗi chỉ định camera nào sẽ sử dụng để chụp dữ liệu hình ảnh hoặc video, nếu thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 chỉ ra rằng đầu vào phải thuộc một trong các loại đó. Giá trị của
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
9 chỉ ra rằng camera và/hoặc micrô phải đối mặt với người dùng. Giá trị của
div{margin-bottom: 10px;}
0 chỉ định rằng máy ảnh hướng ra ngoài và/hoặc micrô nên được sử dụng. Nếu thuộc tính này bị thiếu, tác nhân người dùng có thể tự do quyết định những việc cần làm của riêng mình. Nếu chế độ đối diện được yêu cầu không có sẵn, tác nhân người dùng có thể quay trở lại chế độ mặc định ưa thích của nó.
Lưu ý:
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
7 Trước đây là một thuộc tính boolean, nếu có, yêu cầu (các) thiết bị chụp phương tiện của thiết bị như camera hoặc micrô được sử dụng thay vì yêu cầu đầu vào tệp.
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
7 was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.
nhiều
Khi thuộc tính Boolean
<inputtype="file"accept="image/*,.pdf"/>
5 được chỉ định, đầu vào tệp cho phép người dùng chọn nhiều hơn một tệp.
Các thuộc tính không chuẩn
Ngoài các thuộc tính được liệt kê ở trên, các thuộc tính không chuẩn sau đây có sẵn trên một số trình duyệt. Bạn nên cố gắng tránh sử dụng chúng khi có thể, vì làm như vậy sẽ hạn chế khả năng mã của bạn hoạt động trong các trình duyệt không thực hiện chúng.
div {
margin-bottom: 10px;
}
3
Thuộc tính Boolean
div{margin-bottom: 10px;}
3, nếu có, chỉ ra rằng chỉ các thư mục mới có sẵn để được người dùng chọn trong giao diện Picker tệp. Xem
div{margin-bottom: 10px;}
5 để biết thêm chi tiết và ví dụ.
Mặc dù ban đầu chỉ được triển khai cho các trình duyệt dựa trên WebKit,
div{margin-bottom: 10px;}
3 cũng có thể sử dụng được trong Microsoft Edge cũng như Firefox 50 trở lên. Tuy nhiên, mặc dù nó có hỗ trợ tương đối rộng, nhưng nó vẫn không tiêu chuẩn và không nên được sử dụng trừ khi bạn không có sự thay thế.
Trình xác định loại tệp duy nhất
Trình xác định loại tệp duy nhất là một chuỗi mô tả một loại tệp có thể được người dùng chọn trong phần tử
<inputtype="file"accept="image/*,.pdf"/>
7 của loại
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
4. Mỗi trình xác định loại tệp duy nhất có thể có một trong các biểu mẫu sau:unique file type specifier is a string that describes a type of file that may be selected by the user in an
<inputtype="file"accept="image/*,.pdf"/>
7 element of type
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
4. Each unique file type specifier may take one of the following forms:
Một tiện ích mở rộng tên tệp không nhạy cảm trường hợp hợp lệ, bắt đầu với một ký tự khoảng thời gian ("."). Ví dụ:
div{margin-bottom: 10px;}
9,
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
0 hoặc
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
1.
Một chuỗi loại MIME hợp lệ, không có phần mở rộng.
Chuỗi
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
2 có nghĩa là "bất kỳ tệp âm thanh".
Chuỗi
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
3 có nghĩa là "bất kỳ tệp video".
Chuỗi
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
4 có nghĩa là "bất kỳ tệp hình ảnh" nào.
Thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 lấy một chuỗi chứa một hoặc nhiều nhà xác định loại tệp duy nhất này làm giá trị của nó, được phân tách bằng dấu phẩy. Ví dụ: một trình chọn tệp cần nội dung có thể được trình bày dưới dạng hình ảnh, bao gồm cả các định dạng hình ảnh tiêu chuẩn và tệp PDF, có thể trông như thế này:
<inputtype="file"accept="image/*,.pdf"/>
Sử dụng đầu vào tệp
Một ví dụ cơ bản
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
div{margin-bottom: 10px;}
Điều này tạo ra đầu ra sau:
Bất kể thiết bị hoặc hệ điều hành của người dùng, đầu vào tệp cung cấp một nút mở hộp thoại Picker Picker cho phép người dùng chọn tệp.
Bao gồm thuộc tính
<inputtype="file"accept="image/*,.pdf"/>
5, như được hiển thị ở trên, chỉ định rằng nhiều tệp có thể được chọn cùng một lúc. Người dùng có thể chọn nhiều tệp từ trình chọn tệp theo bất kỳ cách nào mà nền tảng đã chọn của họ cho phép (ví dụ: bằng cách giữ sự thay đổi hoặc điều khiển, sau đó nhấp vào). Nếu bạn chỉ muốn người dùng chọn một tệp duy nhất cho mỗi
<inputtype="file"accept="image/*,.pdf"/>
7, hãy bỏ qua thuộc tính
<inputtype="file"accept="image/*,.pdf"/>
5.
Nhận thông tin về các tệp đã chọn
Các tệp đã chọn 'được trả về bởi thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
2 của phần tử, đây là đối tượng
div{margin-bottom: 10px;}
0 chứa danh sách các đối tượng
div{margin-bottom: 10px;}
1.
div{margin-bottom: 10px;}
0 hoạt động giống như một mảng, vì vậy bạn có thể kiểm tra thuộc tính
div{margin-bottom: 10px;}
3 của nó để nhận số lượng các tệp đã chọn.
Mỗi đối tượng
div{margin-bottom: 10px;}
1 chứa các thông tin sau:
div{margin-bottom: 10px;}
5
Tên của tập tin.
div{margin-bottom: 10px;}
6
Một số chỉ định ngày và thời gian mà tệp được sửa đổi lần cuối, tính bằng mili giây kể từ thời đại Unix (ngày 1 tháng 1 năm 1970 lúc nửa đêm).
div{margin-bottom: 10px;}
7 không dùng nữaDeprecated
Một đối tượng
div{margin-bottom: 10px;}
8 đại diện cho ngày và thời gian mà tệp được sửa đổi lần cuối. Điều này không được sử dụng và không nên được sử dụng. Sử dụng
Một chuỗi chỉ định đường dẫn của tệp so với thư mục cơ sở được chọn trong trình chọn thư mục (nghĩa là bộ chọn
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
4 trong đó thuộc tính
div{margin-bottom: 10px;}
3 được đặt). Đây là không chuẩn và nên được sử dụng một cách thận trọng.
Lưu ý: Bạn có thể đặt cũng như nhận được giá trị của
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
2 trong tất cả các trình duyệt hiện đại; Điều này gần đây nhất đã được thêm vào Firefox, trong phiên bản 57 (xem Bug & NBSP; 1384030). You can set as well as get the value of
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
2 in all modern browsers; this was most recently added to Firefox, in version 57 (see
bug 1384030).
Giới hạn các loại tệp được chấp nhận
Thường thì bạn sẽ không muốn người dùng có thể chọn bất kỳ loại tệp tùy ý nào; Thay vào đó, bạn thường muốn họ chọn các tệp thuộc loại hoặc loại cụ thể. Ví dụ: nếu đầu vào tệp của bạn cho phép người dùng tải lên ảnh hồ sơ, bạn có thể muốn họ chọn các định dạng hình ảnh tương thích web, chẳng hạn như JPEG hoặc PNG.
Các loại tệp có thể chấp nhận có thể được chỉ định với thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5, lấy một danh sách được phân tách bằng dấu phẩy các phần mở rộng tệp được phép hoặc các loại MIME. Vài ví dụ:
<formmethod="post"enctype="multipart/form-data"><div><labelfor="image_uploads">Choose images to upload (PNG, JPG)</label><inputtype="file"id="image_uploads"name="image_uploads"accept=".jpg, .jpeg, .png"multiple/></div><divclass="preview"><p>No files currently selected for upload</p></div><div><button>Submit</button></div></form>
0 - Chấp nhận các tệp PNG hoặc JPEG.
<formmethod="post"enctype="multipart/form-data"><div><labelfor="image_uploads">Choose images to upload (PNG, JPG)</label><inputtype="file"id="image_uploads"name="image_uploads"accept=".jpg, .jpeg, .png"multiple/></div><divclass="preview"><p>No files currently selected for upload</p></div><div><button>Submit</button></div></form>
1 - Chấp nhận bất kỳ tệp nào có loại MIME
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
4. (Nhiều thiết bị di động cũng cho phép người dùng chụp ảnh bằng máy ảnh khi nó được sử dụng.)
<formmethod="post"enctype="multipart/form-data"><div><labelfor="image_uploads">Choose images to upload (PNG, JPG)</label><inputtype="file"id="image_uploads"name="image_uploads"accept=".jpg, .jpeg, .png"multiple/></div><divclass="preview"><p>No files currently selected for upload</p></div><div><button>Submit</button></div></form>
3 - Chấp nhận bất cứ thứ gì có mùi giống như tài liệu MS Word.
Hãy xem xét một ví dụ đầy đủ hơn:
<formmethod="post"enctype="multipart/form-data"><div><labelfor="profile_pic">Choose file to upload</label><inputtype="file"id="profile_pic"name="profile_pic"accept=".jpg, .jpeg, .png"/></div><div><button>Submit</button></div></form>
div{margin-bottom: 10px;}
Điều này tạo ra một đầu ra trông tương tự với ví dụ trước:
Nó có thể trông giống nhau, nhưng nếu bạn thử chọn một tệp có đầu vào này, bạn sẽ thấy trình chọn tệp chỉ cho phép bạn chọn các loại tệp được chỉ định trong giá trị
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 (giao diện chính xác khác nhau giữa các trình duyệt và hệ điều hành).
Thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 không xác nhận các loại của các tệp đã chọn; Nó cung cấp gợi ý cho các trình duyệt để hướng dẫn người dùng hướng tới việc chọn các loại tệp chính xác. Vẫn có thể (trong hầu hết các trường hợp) để người dùng chuyển đổi tùy chọn trong trình chọn tệp cho phép ghi đè này và chọn bất kỳ tệp nào họ muốn, sau đó chọn các loại tệp không chính xác.
Do đó, bạn nên đảm bảo rằng thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5 được sao lưu bằng cách xác thực phía máy chủ thích hợp.
Ghi chú
Bạn không thể đặt giá trị của trình chọn tệp từ tập lệnh - làm một cái gì đó như sau không có hiệu lực:
4, đường dẫn thực đến tệp nguồn không được hiển thị trong thuộc tính
<inputtype="file"accept="image/*,.pdf"/>
9 của đầu vào vì lý do bảo mật rõ ràng. Thay vào đó, tên tệp được hiển thị, với
<formmethod="post"enctype="multipart/form-data"><div><labelfor="image_uploads">Choose images to upload (PNG, JPG)</label><inputtype="file"id="image_uploads"name="image_uploads"accept=".jpg, .jpeg, .png"multiple/></div><divclass="preview"><p>No files currently selected for upload</p></div><div><button>Submit</button></div></form>
9 được chuẩn bị cho nó. Có một số lý do lịch sử cho sự khó hiểu này, nhưng nó được hỗ trợ trên tất cả các trình duyệt hiện đại, và trên thực tế được xác định trong thông số kỹ thuật.
Ví dụ
Trong ví dụ này, chúng tôi sẽ trình bày một trình chọn tệp nâng cao hơn một chút, tận dụng thông tin tệp có sẵn trong thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
2, cũng như hiển thị một vài thủ thuật thông minh.
Lưu ý: Bạn có thể thấy mã nguồn đầy đủ cho ví dụ này trên GitHub-File-example.html (xem nó cũng trực tiếp). Chúng tôi sẽ không giải thích CSS; JavaScript là trọng tâm chính. You can see the complete source code for this example on GitHub —
file-example.html (see it live also). We won't explain the CSS; the JavaScript is the main focus.
Trước hết, chúng ta hãy nhìn vào HTML:
<formmethod="post"enctype="multipart/form-data"><div><labelfor="image_uploads">Choose images to upload (PNG, JPG)</label><inputtype="file"id="image_uploads"name="image_uploads"accept=".jpg, .jpeg, .png"multiple/></div><divclass="preview"><p>No files currently selected for upload</p></div><div><button>Submit</button></div></form>
7 - chúng tôi làm điều này bởi vì các đầu vào tệp có xu hướng xấu, khó tạo kiểu và không nhất quán trong thiết kế của chúng trên các trình duyệt. Bạn có thể kích hoạt phần tử
9, because assistive technology interprets the latter two styles to mean the file input isn't interactive.
Tiếp theo, chúng tôi thêm một trình nghe sự kiện vào đầu vào để lắng nghe các thay đổi đối với giá trị đã chọn của nó (trong trường hợp này, khi các tệp được chọn). Người nghe sự kiện gọi chức năng
9 tùy chỉnh để kiểm tra xem tệp có đúng loại không (ví dụ: các loại hình ảnh được chỉ định trong thuộc tính
<formmethod="post"enctype="multipart/form-data"><div><labelfor="file">Choose file to upload</label><inputtype="file"id="file"name="file"multiple/></div><div><button>Submit</button></div></form>
5).
Nếu có, chúng tôi:
In ra tên và kích thước tệp của nó thành một mục danh sách bên trong
04 tùy chỉnh trả về một phiên bản được định dạng độc đáo có kích thước tính bằng byte/kb/mb (theo mặc định, trình duyệt báo cáo kích thước bằng byte tuyệt đối).
Tạo bản xem trước hình thu nhỏ của hình ảnh bằng cách gọi
<inputtype="file"accept="image/*,.pdf"/>
05. Sau đó, chèn hình ảnh vào mục danh sách bằng cách tạo một
<inputtype="file"accept="image/*,.pdf"/>
06 mới và đặt
<inputtype="file"accept="image/*,.pdf"/>
07 của nó thành hình thu nhỏ.
Nếu loại tệp không hợp lệ, chúng tôi hiển thị một thông báo bên trong mục danh sách nói với người dùng rằng họ cần chọn loại tệp khác.
0 của tệp hiện tại) và biến nó thành một kích thước được định dạng độc đáo trong byte/kb/mb.
<inputtype="file"accept="image/*,.pdf"/>
3
Ví dụ trông như thế này; Có một vở kịch:
Thông số kỹ thuật
Sự chỉ rõ
HTML tiêu chuẩn # file-upload-state- (type = file) # file-upload-state-(type=file)
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
Sử dụng các tệp từ các ứng dụng web - chứa một số ví dụ hữu ích khác liên quan đến
<inputtype="file"accept="image/*,.pdf"/>
4 và API tệp.
Khả năng tương thích của các thuộc tính CSS
Làm thế nào để bạn tải một tài liệu lên HTML?
Xác định trường chọn tệp và nút "Duyệt" để tải lên tệp. Để xác định trường chọn tệp cho phép chọn nhiều tệp, hãy thêm nhiều thuộc tính. Mẹo: Luôn thêm thẻ cho thực tiễn tiếp cận tốt nhất! defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the
Bước 2: Viết một số HTML.Viết hoặc sao chép mã HTML sau vào Notepad: ....
Bước 3: Lưu trang HTML.Lưu tệp trên máy tính của bạn.....
Bước 4: Xem trang HTML trong trình duyệt của bạn ..
Làm cách nào để tải các tệp kéo và thả lên HTML?
Khi bạn kéo bất kỳ tệp hình ảnh nào qua khu vực kéo, đường viền của container cũng đã thay đổi thành rắn và văn bản "kéo & thả thành tệp tải lên" cũng đã thay đổi thành "Phát hành để tải lên tệp".Khi bạn phát hành tệp hình ảnh của mình trong khu vực kéo, ngay lập tức, bản xem trước của hình ảnh đó sẽ xuất hiện.. When you release your image file in the drag area, immediately the preview of that image will appear.
Làm thế nào để bạn tải lên một hình ảnh trong HTML?
Đây là cách nó được thực hiện trong ba bước dễ dàng:..
Sao chép URL của hình ảnh bạn muốn chèn ..
Tiếp theo, mở chỉ mục của bạn.Tệp HTML và chèn nó vào mã IMG.Thí dụ: .
Lưu tệp HTML.Lần tới khi bạn mở nó, bạn sẽ thấy trang web với hình ảnh mới được thêm vào của bạn ..