您现在的位置是:群英 > 开发技术 > web开发
HTML中怎样实现文件上传,有什么方法?
Admin发表于 2022-01-30 17:26:442894 次浏览

    这篇文章给大家分享的是HTML中怎样实现文件上传的方法,有单文件上传和多文件上传。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。

    

    1. 单文件上传

    我们可以将input 类型指定为file,以在Web应用程序中使用文件上传功能。

<input type="file" id="file-uploader">

    input filte 提供按钮上传一个或多个文件。 默认情况下,它使用操作系统的本机文件浏览器上传单个文件。成功上传后,File API 使得可以使用简单的 JS 代码读取File对象。 要读取File对象,我们需要监听 change事件。

    首先,通过id获取文件上传的实例:

const fileUploader = document.getElementById('file-uploader');

    然后添加一个change 事件侦听器,以在上传完成后读取文件对象, 我们从event.target.files属性获取上传的文件信息:

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

    在控制台中观察输出结果,这里关注一下FileList数组和File对象,该对象具有有关上传文件的所有元数据信息。

    2. 多文件上传

    如果我们想上传多个文件,需要在标签上添加 multiple 属性:

<input type="file" id="file-uploader" multiple />

    现在,我们可以上传多个文件了,以前面事例为基础,选择多个文件上传后,观察一下控制台的变化:

    3.了解文件元数据

    每当我们上传文件时,File对象都有元数据信息,例如file namesize,last update time,type 等等。这些信息对于进一步的验证和特殊处理很有用。

const fileUploader = document.getElementById('file-uploader');

// 听更 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 });
  }
});

    下面是单个文件上传的输出结果:

    4.了解 accept 属性

    我们可以使用accept属性来限制要上载的文件的类型,如果只想上传的文件格式是 .jpg.png 时,可以这么做:

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

    在上面的代码中,只能选择后缀是.jpg.png的文件。

    5. 管理文件内容

    成功上传文件后显示文件内容,站在用户的角度上,如果上传之后,没有一个预览的,就很奇怪也不体贴。

    我们可以使用FileReader对象将文件转换为二进制字符串。 然后添加load 事件侦听器,以在成功上传文件时获取二进制字符串。

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

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

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

    6.验证文件大小

    如果用户上传图片过大,为了不让服务器有压力,我们需要限制图片的大小,下面是允许用户上传小于 1M 的图片,如果大于 1M 将上传失败。

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

  let msg = '';

 // 检查文件大小是否大于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;
});

    7. 显示文件上传进度

    更好的用户体验是让用户知道文件上传进度,前面我们用过了FileReader以及读取和加载文件的事件。

const reader = new FileReader();

    FileReader还有一个progress 事件,表示当前上传进度,配合HTML5的progress标签,我们来模拟一下文件的上传进度。

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

    8. 怎么上传目录上传?

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

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

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

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

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

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

    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>

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

 const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

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

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

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

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

});

    10. 使用objectURL处理文件

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

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

总结

    关于HTML中怎样实现文件上传的内容就介绍到这,上述这些方法和示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多HTML的内容,大家可以关注群英网络其它的相关文章。

文本转载自PHP中文网

作者: Tapas Adhikary

译者:前端小智

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: html文件上传
相关信息推荐
2022-05-28 17:14:27 
摘要:java输入语句的方法:1、输入单个字符【char c=(char)System.in.read()】;2、输入整数或者字符串【int a=cin.nextInt()】;3、可以用BufferedReader类输入。
2022-08-04 17:46:38 
摘要:Bootstrap中怎么使用模态框?下面本篇文章给大家介绍一下Bootstrap5模态弹框Modal组件的用法,希望对大家有所帮助!
2022-06-16 17:03:18 
摘要:下面由golang教程栏目给大家介绍Go语言中使用模板引擎,希望对需要的朋友有所帮助!处理响应主体时,最常见的方式就是发送处理好的 HTML 代码,由于需要将数据嵌入到 HTML 中,那么模板引擎...
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部