🎯 Demo

在这里插入图片描述

效果：如上图所示

🎯 起步

首先，要想实现文件上传，至少得有两个标签。

  • input，用来输入文件，
  • button，用来触发文件上传函数
<div>
    选择文件(可多选):
    <input type="file" id="f1" multiple /><br /><br />  
    <button type="button" id="btn-submit">上 传</button>
</div>

input 标签属性解析

type = “file” 的含义 类型是上传文件类型

multiple 的含义 可以上传多个文件

js代码的书写

首先我们来看下接口信息。（因为本教程侧重的是前端代码，所以就不放接口的Java源码了）

image-20200718170555216

接口需要两个参数

  • 一个是header 的 authorization ,也就是令牌
  • 另一个就是我们的重点，文件参数。

Js代码首先肯定是要获取用户上传的文档

//获得文件列表，注意这里不是数组，而是对象
var fileList = document.getElementById('f1').files;  //f1是input type="file" 的那个标签
if (!fileList.length) {   //如果文件为空，触发它
    alert('请选择文件');
    return;
}
var file = new FormData(); //构造FormData对象,这个就是我们最终上传的文件

//多文件上传需要遍历添加到 fromdata 对象
for (var i = 0; i < fileList.length; i++) {
    file.append('file', fileList[i]); 
    //formData.append(name, value); 
    //由于我接口要求的参数名是file，所以我第一个设置的是file，如果你要用于你的项目，请根据后端提供的接口调整name的值
}

//打印 目前file里的全部内容
for (var value of file.values()) {
    console.log(value);
}

然后就是xhr进行文件的上传

var xhr = new XMLHttpRequest(); //创建对象

    xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload"); //链接改成你项目中的
    xhr.setRequestHeader("Authorization", token);  //令牌改成你项目中的
    xhr.send(file); //发送时  Content-Type默认就是: multipart/form-data; 
    xhr.onreadystatechange = function() {
        console.log('state change', xhr.readyState);
        if (this.readyState == 4 && this.status == 200) {
            var obj = JSON.parse(xhr.responseText); //返回值
            console.log(obj);
            //if (obj.data) {    
            //  alert('上传成功');
            //}
        }
}

🎯 完整代码

下面代码中的url和token请改成你自己的。

<!--
 * @Author: 夏2同学
 * @Date: 2020-07-15 22:06:32
 * @LastEditTime: 2020-07-18 13:17:27
 * @LastEditors: 夏2同学
 * @FilePath: \学习JavaScript\index.html
 * @Description: 
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		</script>
	</head>
	<body>
		<div>
			选择文件(可多选):
			<input type="file" id="f1" multiple /><br /><br />
			<button type="button" id="btn-submit">上 传</button>
		</div>
		<script>
			function submitUpload() {
				//获得文件列表，注意这里不是数组，而是对象
				var fileList = document.getElementById('f1').files;
				if (!fileList.length) {
					alert('请选择文件');
					return;
				}
				var file = new FormData(); //构造FormData对象
				// file.append('title', document.getElementById('title').value);

				//多文件上传需要遍历添加到 fromdata 对象
				for (var i = 0; i < fileList.length; i++) {
					file.append('file', fileList[i]); //支持多文件上传
				}

				
				for (var value of file.values()) {
					console.log(value);
				}

				var xhr = new XMLHttpRequest(); //创建对象

				xhr.open("POST", "https://dcdn-jiazheng.21cs.cn/file/upload");
				// xhr.setRequestHeader("Content-Type", "multipart/form-data");
				xhr.setRequestHeader("Authorization",token);

				xhr.send(file); //发送时  Content-Type默认就是: multipart/form-data; 
				
				xhr.onreadystatechange = function() {
					console.log('state change', xhr.readyState);
					if (this.readyState == 4 && this.status == 200) {
						var obj = JSON.parse(xhr.responseText); //返回值
						console.log(obj);
						if (obj.data) {
							alert('上传成功');
						}
					}
				}

			}

			//绑定提交事件
			document.getElementById('btn-submit').addEventListener('click', submitUpload);
		</script>
	</body>
</html>

🎯 参考

https://juejin.im/post/5da14778f265da5bb628e590

# javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

BAAI M3-Embedding 技术报告

BGE系列核心技术报告包括BGE(v1/v1.5)和BGE-M3两篇论文。BGE-M3创新性地提出统一模型解决多语言、多功能、多粒度检索问题，支持100+语言、8192token输入，能同时输出稠密、稀疏和多向量三种表示。关键技术包括位置重训、大batch训练和自知识蒸馏，在MIRACL、MKQA等评测中全面领先。该模型显著简化了现有检索系统架构，但极长文档处理仍有提升空间。相关论文可在arXiv

avatar 2048 AI社区
cover

RoboAgent:Generalization and Efficiency in Robot Manipulation via Semantic Augmentations and Action

avatar 2048 AI社区

人工智能与大数据：颠覆传统行业，打造智能未来

人工智能（AI）是模拟和扩展人类智能的技术，它能够通过学习、推理、判断和优化等方式自主地处理任务。机器学习（ML）：通过算法分析大量数据，从中发现规律并进行预测。机器学习应用在金融风险管理、精准营销、健康诊断等领域。自然语言处理（NLP）：让计算机理解、生成和翻译人类语言。NLP在智能客服、语言翻译、情感分析等方面有广泛应用。计算机视觉：使计算机能够“看”到并理解图像或视频，广泛应用于自动驾驶、医

avatar 2048 AI社区