Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

青灯夜游
Lepaskan: 2021-12-13 10:55:05
ke hadapan
18472 orang telah melayarinya

Bagaimana untuk memuat naik fail? Artikel berikut akan berkongsi dengan anda 10 petua untuk memuat naik fail HTML dan 10 cara yang disokong untuk memuat naik fail HTML. Saya harap ia akan membantu anda.

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

Fungsi muat naik fail boleh dikatakan sebagai keperluan yang kerap dalam projek. Daripada memuat naik foto di media sosial hingga menyiarkan resume di papan kerja, muat naik fail ada di mana-mana. Dalam artikel ini, kami akan membincangkan 10 penggunaan sokongan muat naik fail HTML, kami berharap ia berguna kepada anda.

1. Muat naik fail tunggal

Kami boleh menentukan jenis input sebagai file untuk menggunakan fungsi muat naik fail dalam aplikasi web.

<input type="file" id="file-uploader">
Salin selepas log masuk

input filte Menyediakan butang untuk memuat naik satu atau lebih fail. Secara lalai, ia menggunakan penyemak imbas fail asli sistem pengendalian untuk memuat naik satu fail. Selepas muat naik berjaya, File API membolehkan anda membaca objek File menggunakan kod JS mudah. Untuk membaca objek File, kita perlu mendengar acara change.

Pertama, dapatkan contoh muat naik fail melalui id:

const fileUploader = document.getElementById(&#39;file-uploader&#39;);
Salin selepas log masuk

Kemudian tambahkan change pendengar acara untuk membaca objek fail selepas muat naik selesai, kami mendapat ia daripada atribut event.target.files mendapat maklumat fail yang dimuat naik:

fileUploader.addEventListener(&#39;change&#39;, (event) => {
  const files = event.target.files;
  console.log(&#39;files&#39;, files);
});
Salin selepas log masuk

Perhatikan output dalam konsol, di sini fokus pada tatasusunan FileList dan objek File, yang mempunyai semua maklumat metadata tentang fail yang dimuat naik.

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

Jika anda agak teruja selepas melihat ini dan ingin bermain sedikit, anda boleh bermain dengan CodePen, alamat: https://codepen.io /atapas/pen /rNLOyRm

2. Muat naik berbilang fail

Jika kita ingin memuat naik berbilang fail, kita perlu menambah atribut multiple pada teg:

<input type="file" id="file-uploader" multiple />
Salin selepas log masuk

Kini, kita boleh memuat naik berbilang fail Berdasarkan contoh sebelumnya, selepas memilih berbilang fail untuk dimuat naik, perhatikan perubahan dalam konsol:

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

<. 🎜>Jika anda melihat Pada ketika ini, saya agak teruja Jika anda ingin bermain sedikit, anda boleh bermain dengan CodePen Alamat: https://codepen.io/atapas/pen/MWeamYp

3. Fahami metadata fail

Setiap kali kami memuat naik fail, objek

mempunyai maklumat metadata, seperti File, file name, masa kemas kini terakhir, taip, dsb. Maklumat ini berguna untuk pengesahan lanjut dan pengendalian khas. size

const fileUploader = document.getElementById(&#39;file-uploader&#39;);

// 听更 change 件并读取元数据
fileUploader.addEventListener('change', (event) => {
  // 获取文件列表数组
  const files = event.target.files;

  // 遍历并获取元数据
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});
Salin selepas log masuk
Berikut ialah hasil output muat naik fail tunggal:

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

Jika anda melihat ini, anda sedikit teruja dan nak tunjuk pandai, Boleh main dengan CodePen, alamat: https://codepen.io/atapas/pen/gOMaRJv

4 Fahami atribut

accept

Kami boleh menggunakan atribut

untuk Hadkan jenis fail yang hendak dimuat naik Jika anda hanya mahu memuat naik format fail yang accept, .jpg, anda boleh melakukan ini: .png

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
Salin selepas log masuk
Dalam. kod di atas, anda hanya boleh memilih fail akhiran

🎜> dan .jpg. .png

Jika anda agak teruja selepas melihat ini dan ingin bermain sedikit, anda boleh bermain dengan CodePen, alamat: https://codepen.io/atapas/pen/OJXymRP

5. Urus kandungan fail

Paparkan kandungan fail selepas berjaya memuat naik fail Dari perspektif pengguna, ia akan menjadi pelik dan tidak bertimbang rasa jika tiada pratonton selepas memuat naik.

Kita boleh menggunakan objek

untuk menukar fail kepada rentetan binari. Kemudian tambahkan FileReader pendengar acara untuk mendapatkan rentetan binari apabila fail berjaya dimuat naik. load

// FileReader 实例
const reader = new FileReader();

fileUploader.addEventListener(&#39;change&#39;, (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener(&#39;load&#39;, (event) => {
    const img = document.createElement(&#39;img&#39;);
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});
Salin selepas log masuk
Jika anda agak teruja selepas melihat ini dan ingin bermain sedikit, anda boleh bermain dengan CodePen, alamat: https://codepen.io/atapas/pen/zYBvdjZ

6. Sahkan saiz fail

Jika imej yang dimuat naik oleh pengguna terlalu besar, untuk tidak memberi tekanan pada pelayan, kita perlu mengehadkan saiz imej . Berikut adalah untuk membenarkan pengguna memuat naik imej yang lebih kecil daripada

Jika Lebih besar daripada 1M akan gagal muat naik. 1M

fileUploader.addEventListener(&#39;change&#39;, (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = &#39;&#39;;

 // 检查文件大小是否大于1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});
Salin selepas log masuk
Jika anda sedikit teruja selepas melihat ini dan ingin bermain bersungguh-sungguh, anda boleh bermain dengan CodePen, alamat: https://codepen.io/atapas/pen/pobjMKv

7. Paparkan kemajuan muat naik fail

Pengalaman pengguna yang lebih baik adalah untuk memberitahu pengguna kemajuan muat naik fail Sebelum ini kami menggunakan

dan acara membaca dan memuatkan fail. FileReader

const reader = new FileReader();
Salin selepas log masuk

Terdapat juga acara FileReader, yang menunjukkan kemajuan muat naik semasa Dengan teg progress HTML5, mari kita simulasi kemajuan muat naik fail. progress

reader.addEventListener(&#39;progress&#39;, (event) => {
  if (event.loaded && event.total) {
    // 计算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 将值绑定到 `progress`标签
    progress.value = percent;
  }
});
Salin selepas log masuk

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

如果大家看到这里,有点激动,想手贱一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上传目录上传?

我们可以上传整个目录吗?嗯,这是可能的,但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传),它允许我们上传整个目录。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件进行上传,而在谷歌和Edge下,就会给用户提供一个下拉,让用户选择是根据文件进行上传还是根据文件夹进行上传。
<input type="file" id="file-uploader" webkitdirectory />
Salin selepas log masuk

用户必须需要确认才能上传目录

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

用户单击“上传”按钮后,就会进行上传。 这里要注意的重要一点。 FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。 对于每个File对象,webkitRelativePath属性表示目录路径。

例如,上传一个主目录及其下的其他文件夹和文件:

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

现在,File 对象将将webkitRelativePath填充为:

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

如果大家看到这里,有点激动,想手贱一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上传

不支持文件上传的拖拽就有点 low 了,不是吗?我们来看看如何通过几个简单的步骤实现这一点。

首先,创建一个拖放区域和一个可选的区域来显示上传的文件内容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>
Salin selepas log masuk

通过它们各自的ID获取dropzonecontent 区域。

 const dropZone = document.getElementById(&#39;drop-zone&#39;);
 const content = document.getElementById(&#39;content&#39;);
Salin selepas log masuk

添加一个dragover 事件处理程序,以显示将要复制的内容的效果:

dropZone.addEventListener(&#39;dragover&#39;, event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = &#39;copy&#39;;
});
Salin selepas log masuk

Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML

接下来,我们需要一个drop事件监听器来处理。

dropZone.addEventListener(&#39;drop&#39;, event => {
  // Get the files
  const files = event.dataTransfer.files;

});
Salin selepas log masuk

如果大家看到这里,有点激动,想手贱一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL处理文件

有一个特殊的方法叫做URL.createobjecturl(),用于从文件中创建唯一的URL。还可以使用URL.revokeObjectURL()方法来释放它。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
fileUploader.addEventListener(&#39;change&#39;, (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement(&#39;img&#39;);
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});
Salin selepas log masuk

如果大家看到这里,有点激动,想手贱一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen/BazzaoN

总结

无论何时,如果你还想学习本文涉及的一些知识,你可以在这里尝试。

英文原文地址:https://dev.to/atapas/10-useful-file-upload-tips-for-web-developers-2d1d

作者: Tapas Adhikary

译者:前端小智

更多编程相关知识,请访问:编程入门!!

Atas ialah kandungan terperinci Bagaimana untuk memuat naik fail? 10 petua untuk berkongsi muat naik fail HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:segmentfault.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!