这篇文章给大家分享的是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 name，size，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获取dropzone和content 区域。
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的内容，大家可以关注其它的相关文章。
下面是用springboot实现的一个简单文件上传例子
1.文件上传是使用@RequestPart注解，和MultipartFile类来接受，MultipartFile类中有很多属性供我们使用。话不多说先创建一个Controller
/**
* @Author zxm
* @Date 2022/01/07 10:24
*/
@Controller
@RequestMapping("/count")
public class ContextController {
/*上传文件的接口*/
@PostMapping("/uplode")
@ResponseBody
public String getUplode(@RequestPart("one") MultipartFile mf,
@RequestPart("any") MultipartFile[] mfs) throws IOException {
System.out.println("单文件上传信息为:"+mf.getOriginalFilename());
System.out.println("多文件个数:"+mfs.length);
for (MultipartFile m:mfs){
System.out.println("多文件信息:文件名称:"+m.getOriginalFilename()+",文件大小:"+m.getSize()/1000+"kb");
}
/*将文件上传到指定文件夹*/
if (!mf.isEmpty()){
String fileName=mf.getOriginalFilename();
//文件上传
mf.transferTo(new File("E:\\"+fileName));
}
if (mfs.length>0){
for (MultipartFile m: mfs) {
m.transferTo(new File("E:\\"+m.getOriginalFilename()));
}
}
return "成功";
}
}2.然后创建一个前端代码测试，如果需要多文件的话，给input标签添加multiple属性就表示这是个多文件的input。然后在from里面加enctype=“multipart/form-data” 表示这个请求有多文件请求。
<!--
多文件请求:enctype="multipart/form-data"
多文件:multiple
-->
<form action="/count/uplode" method="post" enctype="multipart/form-data" >
<input type="file" value="上传单个文件" name="one" ><p>
<input type="file" value="上传多个文件" name="any" multiple><p>
<input type="submit" value="提交" >
</form>在这里基本上就可以上传文件了，但是相信有很多同学在这会一直报错，这是因为上传的文件太大或者文件太多导致的，遇到这样的请款只需要到配置文件里面加入相应的配置即可。文件上传的源代码如下：
可以看到要先配置文件上传只需要配置 spring.servlet.multipart 就行了，所有的配置参数都在MultipartProperties类里面。里面的参数有很多，这里就不一一介绍简介，主要介绍两个常用的参数。
3.配置文件
spring:
servlet:
multipart:
max-file-size: 10MB #单个文件最大大小
max-request-size: 100MB #文件最多上传的大小这样配置后就可以上传成功啦。咋们看一下结果
可以看到我们已将把文件选好了，然后点击提交按钮，后台已将显示出来了，表示上传成功。
