Làm cách nào để thay đổi tên tệp trong HTML?

Bạn có thể đổi tên tệp bằng cách thêm tiền tố ký tự từ mẫu mong muốn vào tên tệp. Có thể đổi tên tệp trong vùng có thể ghi hoặc trong thư mục trên tab

Làm cách nào để thay đổi tên tệp trong HTML?
. Bạn có thể chọn các ký tự được thêm vào từ các mẫu.

  1. Chọn tệp bạn muốn đổi tên từ tab
    Làm cách nào để thay đổi tên tệp trong HTML?
    của danh sách thư mục.
  2. Ở chế độ dừng, chọn MENU - tab
    Làm cách nào để thay đổi tên tệp trong HTML?
    - “ Change File Name,” and then press
    Làm cách nào để thay đổi tên tệp trong HTML?
    .

    Làm cách nào để thay đổi tên tệp trong HTML?

  3. Nhấn
    Làm cách nào để thay đổi tên tệp trong HTML?
    hoặc
    Làm cách nào để thay đổi tên tệp trong HTML?
    để chọn các ký tự mong muốn làm tiền tố cho tên tệp, rồi nhấn
    Làm cách nào để thay đổi tên tệp trong HTML?
    .

    Làm cách nào để thay đổi tên tệp trong HTML?

    Đang thực thi. ” xuất hiện trong cửa sổ hiển thị và các ký tự đã chọn được thêm vào tên tệp được phân tách với nó bằng dấu gạch dưới (_).

    (e. g. Nếu “ A ” được thêm vào tệp 121215_001. A_ 121215_001)

  4. Nhấn
    Làm cách nào để thay đổi tên tệp trong HTML?
    STOP
    để thoát khỏi chế độ menu.

Ghi chú

  • Bạn không thể thay đổi tên của tệp được bảo vệ. Để thay đổi tên tệp, trước tiên hãy giải phóng bảo vệ
  • Bạn không thể thay đổi tên của tệp nhạc hoặc podcast

Gợi ý

  • Bạn có thể sử dụng phần mềm Sound Organizer để đổi tên tệp

Các phần tử

<input type="file" accept="image/*,.pdf" />
4 với
<input type="file" accept="image/*,.pdf" />
5 cho phép 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 gửi biểu mẫu hoặc được thao tác bằng mã JavaScript và API tệp

Thuộc tính của đầu vào tệp chứa một chuỗi đại diện cho đường dẫn đến (các) tệp đã chọn. Nếu chưa có tệp nào được chọn, giá trị là một chuỗi rỗng (_______0_______7). Khi người dùng chọn nhiều tệp,

<input type="file" accept="image/*,.pdf" />
6 đại diện cho tệp đầu tiên trong danh sách các tệp họ đã chọn. Các tập tin khác có thể được xác định bằng cách sử dụng

Ghi chú. Giá trị là , không phải là đường dẫn thực của tệp. Điều này là để ngăn phần mềm độc hại đoán cấu trúc tệp của người dùng

Ngoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử

<input type="file" accept="image/*,.pdf" />
4, đầu vào loại
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
2 cũng hỗ trợ các thuộc tính sau

Giá trị thuộc tính

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 là một chuỗi xác định 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. 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 sẽ rất hữu ích khi cung cấp một bộ xác định loại kỹ lưỡng khi bạn cần các tệp có định dạng nhất định

Chẳng hạn, có một số cách để xác định tệp Microsoft Word, vì vậy một trang web chấp nhận tệp Word có thể sử dụng

<input type="file" accept="image/*,.pdf" />
4 như thế này

________số 8_______

Giá trị thuộc tính

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
5 là một chuỗi chỉ định máy ảnh nào sẽ được sử dụng để chụp dữ liệu hình ảnh hoặc video, nếu thuộc tính
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 cho biết rằng đầu vào phải thuộc một trong các loại đó. Giá trị của
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
7 cho biết rằng nên sử dụng máy ảnh và/hoặc micrô hướng về phía người dùng. Giá trị của
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
8 chỉ định rằng nên sử dụng camera và/hoặc micrô hướng ra ngoài. Nếu thuộc tính này bị thiếu, tác nhân người dùng có thể tự quyết định phải làm gì. Nếu chế độ đối mặt được yêu cầu không khả dụng, tác nhân người dùng có thể quay lại chế độ mặc định ưa thích của nó

Ghi chú.

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
5 trước đây là một thuộc tính Boolean, nếu có, yêu cầu sử dụng (các) thiết bị ghi phương tiện của thiết bị như máy ảnh hoặc micrô thay vì yêu cầu nhập tệp

Khi thuộc tính Boolean

div {
  margin-bottom: 10px;
}
0 được chỉ định, đầu vào tệp cho phép người dùng chọn nhiều tệp

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 triển khai chúng

Thuộc tính Boolean

div {
  margin-bottom: 10px;
}
1, nếu có, cho biết rằng người dùng chỉ có thể chọn các thư mục trong giao diện bộ chọn tệp. Xem
div {
  margin-bottom: 10px;
}
3 để 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, nhưng

div {
  margin-bottom: 10px;
}
1 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 phải là tiêu chuẩn và không nên được sử dụng trừ khi bạn không có giải pháp thay thế nào

Trình xác định loại tệp duy nhất là một chuỗi mô tả loại tệp có thể được người dùng chọn trong phần tử

<input type="file" accept="image/*,.pdf" />
4 thuộc loại
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
2. Mỗi trình xác định loại tệp duy nhất có thể có một trong các dạng sau

  • Phần mở rộng tên tệp phân biệt chữ hoa chữ thường hợp lệ, bắt đầu bằng dấu chấm (". ") nhân vật. Ví dụ.
    div {
      margin-bottom: 10px;
    }
    
    7,
    div {
      margin-bottom: 10px;
    }
    
    8 hoặc
    div {
      margin-bottom: 10px;
    }
    
    9
  • Chuỗi loại MIME hợp lệ, không có phần mở rộng
  • Chuỗi
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    0 có nghĩa là "bất kỳ tệp âm thanh nào"
  • Chuỗi
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    1 có nghĩa là "bất kỳ tệp video nào"
  • Chuỗi
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    2 có nghĩa là "bất kỳ tệp hình ảnh nào"

Thuộc tính

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 lấy một chuỗi chứa một hoặc nhiều chỉ đị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ụ: bộ chọn tệp cần nội dung có thể được hiển thị dưới dạng hình ảnh, bao gồm cả định dạng hình ảnh tiêu chuẩn và tệp PDF, có thể trông như thế này

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
}

Điều này tạo ra đầu ra sau

Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn và xem nó đang chạy trực tiếp

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 chọn tệp cho phép người dùng chọn tệp

Bao gồm thuộc tính, như được hiển thị ở trên, chỉ định rằng có thể chọn nhiều tệp cùng một lúc. Người dùng có thể chọn nhiều tệp từ bộ 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 (e. g. bằng cách giữ phím Shift hoặc Control, rồi bấm). Nếu bạn chỉ muốn người dùng chọn một tệp duy nhất cho mỗi

<input type="file" accept="image/*,.pdf" />
4, hãy bỏ qua thuộc tính
div {
  margin-bottom: 10px;
}
0

Các tệp đã chọn' được trả về bởi thuộc tính

<input type="file" accept="image/*,.pdf" />
9 của phần tử, là đối tượng
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
8 chứa danh sách các đối tượng
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
9.
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
8 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;
}
1 của nó để biết số lượng tệp đã chọn

Mỗi đối tượng

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
9 chứa thông tin sau

div {
  margin-bottom: 10px;
}
3

tên tập tin

div {
  margin-bottom: 10px;
}
4

Một số chỉ định ngày và giờ mà tệp được sửa đổi lần cuối, tính bằng mili giây kể từ kỷ nguyên UNIX (ngày 1 tháng 1 năm 1970 lúc nửa đêm)

div {
  margin-bottom: 10px;
}
5 Không dùng nữa

Một đối tượng

div {
  margin-bottom: 10px;
}
6 đại diện cho ngày và giờ mà tệp được sửa đổi lần cuối. Điều này không được chấp nhận và không nên được sử dụng. Sử dụng
div {
  margin-bottom: 10px;
}
4 để thay thế

div {
  margin-bottom: 10px;
}
8

Kích thước của tệp tính bằng byte

div {
  margin-bottom: 10px;
}
9

Loại MIME của tệp

const input = document.querySelector("input[type=file]");
input.value = "foo";
0 Không chuẩn

Một chuỗi chỉ định đường dẫn của tệp liên quan đến thư mục cơ sở được chọn trong bộ chọn thư mục (nghĩa là bộ chọn

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
2 trong đó thuộc tính được đặt). Điều này là không chuẩn và nên được sử dụng một cách thận trọng

Ghi chú. Bạn có thể đặt cũng như nhận giá trị của

<input type="file" accept="image/*,.pdf" />
9 trong tất cả các trình duyệt hiện đại;

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; . 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 với web, chẳng hạn như JPEG hoặc PNG

Các loại tệp được chấp nhận có thể được chỉ định bằng thuộc tính, thuộc tính này có danh sách các phần mở rộng tệp được phép hoặc loại MIME được phân tách bằng dấu phẩy. Vài ví dụ

  • const input = document.querySelector("input[type=file]");
    input.value = "foo";
    
    5 hoặc
    const input = document.querySelector("input[type=file]");
    input.value = "foo";
    
    6 — Chấp nhận tệp PNG
  • const input = document.querySelector("input[type=file]");
    input.value = "foo";
    
    7 hoặc
    const input = document.querySelector("input[type=file]");
    input.value = "foo";
    
    8 — Chấp nhận tệp PNG hoặc JPEG
  • const input = document.querySelector("input[type=file]");
    input.value = "foo";
    
    9 — Chấp nhận bất kỳ tệp nào có loại MIME
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    2. (Nhiều thiết bị di động cũng cho phép người dùng chụp ảnh bằng camera khi sử dụng tính năng này. )
  • <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple />
      div>
      <div class="preview">
        <p>No files currently selected for uploadp>
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    1 — chấp nhận bất kỳ 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

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
}

Điều này tạo ra một đầu ra trông tương tự như ví dụ trước

Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn và xem nó đang chạy trực tiếp

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 rằng bộ chọn tệp chỉ cho phép bạn chọn các loại tệp được chỉ định trong giá trị

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 (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

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 không xác thực loại tệp đã chọn; . Người dùng vẫn có thể (trong hầu hết các trường hợp) chuyển đổi một tùy chọn trong trình chọn tệp để có thể ghi đè tùy chọn này và chọn bất kỳ tệp nào họ muốn, sau đó chọn loại tệp không chính xác

Do đó, bạn nên đảm bảo rằng thuộc tính

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
3 được sao lưu bằng xác thực phía máy chủ phù hợp

  1. Bạn không thể đặt giá trị của bộ chọn tệp từ tập lệnh — thực hiện thao tác như sau không có tác dụng

    const input = document.querySelector("input[type=file]");
    input.value = "foo";
    

  2. Khi một tệp được chọn bằng cách sử dụng
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple />
      div>
      <div class="preview">
        <p>No files currently selected for uploadp>
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    5, đường dẫn thực tới tệp nguồn không được hiển thị trong thuộc tính
    <input type="file" accept="image/*,.pdf" />
    
    6 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
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="file">Choose file to uploadlabel>
        <input type="file" id="file" name="file" multiple />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    0 được thêm vào trước. Có một số lý do lịch sử cho điề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ế là

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

<input type="file" accept="image/*,.pdf" />
9, cũng như thể hiện một vài thủ thuật thông minh

Ghi chú. Bạn có thể xem mã nguồn hoàn chỉnh cho ví dụ này trên GitHub — file-example. html (cũng xem trực tiếp). Chúng tôi sẽ không giải thích về CSS;

Trước hết, hãy xem HTML

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  div>
  <div class="preview">
    <p>No files currently selected for uploadp>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

Điều này tương tự như những gì chúng ta đã thấy trước đây — không có gì đặc biệt để bình luận

Tiếp theo, hãy xem qua JavaScript

Trong những dòng đầu tiên của tập lệnh, chúng tôi nhận được các tham chiếu đến chính biểu mẫu đầu vào và phần tử

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  div>
  <div class="preview">
    <p>No files currently selected for uploadp>
  div>
  <div>
    <button>Submitbutton>
  div>
form>
9 với lớp
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
0. Tiếp theo, chúng tôi ẩn phần tử
<input type="file" accept="image/*,.pdf" />
4 — chúng tôi làm điều này vì đầ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ử
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
2 bằng cách nhấp vào phần tử
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
3 của nó, vì vậy tốt hơn là ẩn phần tử
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
2 một cách trực quan và tạo kiểu cho nhãn giống như một nút, nhờ đó người dùng sẽ biết để tương tác với phần tử đó nếu họ muốn tải tệp lên

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

Ghi chú.

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
5 được sử dụng để ẩn đầu vào tệp thay vì
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
6 hoặc
html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
7, vì công nghệ hỗ trợ diễn giải hai kiểu sau có nghĩa là đầu vào tệp không tương tác

Tiếp theo, chúng tôi thêm một trình lắng 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 là khi các tệp được chọn). Trình lắng nghe sự kiện gọi hàm

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
8 tùy chỉnh của chúng tôi

<input type="file" accept="image/*,.pdf" />
0

Bất cứ khi nào hàm

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
8 được gọi, chúng ta

  • Sử dụng vòng lặp
    const input = document.querySelector('input');
    const preview = document.querySelector('.preview');
    
    input.style.opacity = 0;
    
    0 để làm trống nội dung trước đó của bản xem trước
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple />
      div>
      <div class="preview">
        <p>No files currently selected for uploadp>
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    9
  • Lấy đối tượng
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    8 chứa thông tin về tất cả các tệp đã chọn và lưu trữ nó trong một biến có tên là
    const input = document.querySelector('input');
    const preview = document.querySelector('.preview');
    
    input.style.opacity = 0;
    
    3
  • Kiểm tra xem có tệp nào được chọn không, bằng cách kiểm tra xem
    const input = document.querySelector('input');
    const preview = document.querySelector('.preview');
    
    input.style.opacity = 0;
    
    4 có bằng 0 không. Nếu vậy, hãy in một thông báo vào bản xem trước
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple />
      div>
      <div class="preview">
        <p>No files currently selected for uploadp>
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    9 nói rằng không có tệp nào được chọn
  • Nếu các tệp đã được chọn, chúng tôi lặp qua từng tệp, in thông tin về tệp đó vào bản xem trước
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)label>
        <input
          type="file"
          id="image_uploads"
          name="image_uploads"
          accept=".jpg, .jpeg, .png"
          multiple />
      div>
      <div class="preview">
        <p>No files currently selected for uploadp>
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    9. Những điều cần lưu ý ở đây
  • Chúng tôi sử dụng chức năng tùy chỉnh
    const input = document.querySelector('input');
    const preview = document.querySelector('.preview');
    
    input.style.opacity = 0;
    
    7 để kiểm tra xem tệp có đúng loại không (e. g. các loại hình ảnh được chỉ định trong thuộc tính
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="file">Choose file to uploadlabel>
        <input type="file" id="file" name="file" multiple />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    
    3)
  • Nếu có, chúng tôi
    • In ra tên và kích thước tệp của nó vào một mục danh sách bên trong
      <form method="post" enctype="multipart/form-data">
        <div>
          <label for="image_uploads">Choose images to upload (PNG, JPG)label>
          <input
            type="file"
            id="image_uploads"
            name="image_uploads"
            accept=".jpg, .jpeg, .png"
            multiple />
        div>
        <div class="preview">
          <p>No files currently selected for uploadp>
        div>
        <div>
          <button>Submitbutton>
        div>
      form>
      
      9 trước đó (thu được từ
      <input type="file" accept="image/*,.pdf" />
      
      00 và
      <input type="file" accept="image/*,.pdf" />
      
      01). Hàm
      <input type="file" accept="image/*,.pdf" />
      
      02 tùy chỉnh trả về một phiên bản được định dạng độc đáo của 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 theo 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
      <input type="file" accept="image/*,.pdf" />
      
      03. Sau đó, chèn cả hình ảnh vào mục danh sách bằng cách tạo một
      <input type="file" accept="image/*,.pdf" />
      
      04 mới và đặt nó thành hình thu nhỏ
  • Nếu loại tệp không hợp lệ, chúng tôi sẽ hiển thị thông báo bên trong mục danh sách cho người dùng biết rằng họ cần chọn loại tệp khác

<input type="file" accept="image/*,.pdf" />
1

Hàm

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;
7 tùy chỉnh lấy một đối tượng
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>
9 làm tham số, sau đó sử dụng
<input type="file" accept="image/*,.pdf" />
08 để kiểm tra xem có bất kỳ giá trị nào trong
<input type="file" accept="image/*,.pdf" />
09 khớp với thuộc tính
div {
  margin-bottom: 10px;
}
9 của tệp không. Nếu tìm thấy kết quả khớp, hàm trả về
<input type="file" accept="image/*,.pdf" />
11. Nếu không tìm thấy kết quả khớp, nó sẽ trả về
<input type="file" accept="image/*,.pdf" />
12

<input type="file" accept="image/*,.pdf" />
2

Hàm

<input type="file" accept="image/*,.pdf" />
02 lấy một số (byte, được lấy từ thuộc tính
div {
  margin-bottom: 10px;
}
8 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 theo byte/KB/MB

Làm cách nào để lấy tên tệp từ HTML đầu vào?

Để chọn tệp, chúng tôi sẽ sử dụng HTML lấy tên tệp bằng cách sử dụng phương thức change() của jQuery . Phương pháp này được sử dụng trong JQuery để lấy tệp đầu vào theo tên tệp đã chọn.

Làm cách nào để thay đổi tên tệp trong Javascript?

Để đổi tên tệp, chúng tôi phải tạo tệp mới và chuyển tên mới của chúng tôi cho Trình tạo tệp . const myRenamedFile = new File([myFile], 'my-file-Final-1-really. txt'); . nhật ký (myRenamedFile); . Tệp {tên. "my-file-cuối cùng-1-thực sự.

Làm cách nào để đổi tên dòng lệnh của tệp?

Câu trả lời là sử dụng Lệnh Đổi tên/Đổi tên . Nó có thể được sử dụng để đổi tên tệp, thư mục và phần mở rộng tệp. Cú pháp đổi tên file CMD là “rename/ren [