在这里插入图片描述

上传文件

原生上传文件可以通过input标签中的type="file"实现，多文件上传则需要加上multiple属性。
在这里插入图片描述

//html
    <span>文件名：</span>
	<input type="text" id="doc">
	<button>选择文件</button>
	<input type="file" id="upload" multiple onchange="getFile(value)" style="opacity: 0.5; margin-left: -74px; width: 74px;">

获取上传文件信息

通过onchange方法触发文件上传。怎么才能拿到上传的文件信息呢？
通过获取id为upload的dom，即document.getElementById('upload')，通过document.getElementById(‘upload’).files获取文件的具体信息，该数据为伪数组。
在这里插入图片描述

	<script>
		function getFile(value) {
			// 获取文本框dom
			var doc = document.getElementById('doc');
			// 获取上传控件dom
			var upload = document.getElementById('upload');
			let files = upload.files;
			// 获取文件名
			var fileName = upload.files[0].name;
			// 获取文件路径
			var filePath = upload.value;
			doc.value = fileName;
		}
	</script>

数据传输

将文件信息放到formData中，然后进行传输。

let formData = new FormData();
for (let i = 0; i < files.length; i++) {
	let file = files[i]
	formData.append('files', file)
}

注意直接console.log(formData)是空值，可以使用formData.getAll("")或者formData.get("")查看存储的文件信息，getAll查看全部信息，get默认查看第一个。

console.log(formData.getAll('files'))

在这里插入图片描述

源码

<body>
	<span>文件名：</span>
	<input type="text" id="doc">
	<button>选择文件</button>
	<input type="file" id="upload" multiple onchange="getFile(value)"
		style="opacity: 0.5; margin-left: -74px; width: 74px;">
	<script>
		function getFile(value) {
			let formData = new FormData();
			// 获取文本框dom
			var doc = document.getElementById('doc');
			// 获取上传控件dom
			var upload = document.getElementById('upload');
			let files = upload.files;
			//遍历文件信息append到formData存储
			for (let i = 0; i < files.length; i++) {
				let file = files[i]
				formData.append('files', file)
			}
			// 获取文件名
			var fileName = upload.files[0].name;
			// 获取文件路径
			var filePath = upload.value;
			doc.value = fileName;
		}
	</script>
</body>
# javascript # 前端 # html
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

Android安卓手机3389远程连接电脑桌面教程

前一期我们介绍过安卓手机通过VNC服务远程连接XP/linux桌面的方法，实现起来需要安装VNC服务软件，今天就介绍利用安卓手机来远程连接Windows自带的3389远程桌面，当然手机端也必须安装一个客户端，电脑端使用自带的远程桌面功能 手机端软件下载： 3389远程桌面连接Remote RDP安卓版 点此下载 安卓手机通过V

avatar GitCode 开源社区

Android分析之LowMemoryKiller

Android分析之LowMemoryKillerlinux操作系统的传统理念就是内存用的越多越好，尽可能拿来用，既然被尽量的使用，自然应该有清除机制。Android以linux为基础，自然部分继承了这个特性。Android使用lowmemorykiller在达到某个内存门限的情况下去选择进程删除来释放内存。关键的配置文件有如下两个，/sys/module/lowmemorykiller/para

avatar GitCode 开源社区

Implementation of exception in Linux

Implementation of exception in LinuxBackgroundInthe MIPS architecture, interrupt, traps, system calls and everythingelse that can disrupt the normal flow of execution are c

avatar GitCode 开源社区