介绍//,前端,upload.html
& lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; title>上传文件demo
,& lt; style 媒体=皊creen"比;
编{才能
,,宽度:50%;
,,身高:5 px;
边境才能:1 px solid # ccc;
,,这个特性:4 px;
,,margin-top: 10 px;
位置:,才能相对;
,,}
.progress>才能跨越{
,,显示:inline-block;
位置:才能,绝对;
,,这个特性:4 px;
,,:0;
,,左:0;
,,身高:100%;
,,宽度:0;
,,背景颜色:rgb (98,, 230,, 74);
过渡:才能,width 0.3 s 打发走;
,,}
,& lt;/style>
,& lt;/head>
,& lt; body>
,& lt; input id=癴ile",类型=癴ile", multiple>
,& lt; div 类=皃rogress"比;
& lt;才能span> & lt;/span>
,& lt;/div>
,& lt; script 类型=拔谋?javascript"比;
var 才能;http =, function (选项),{//,才能过滤请求成功后的响应对象
function 才能;getBody (xhr), {
,,var text =, xhr.responseText | |, xhr.response
,,if (文本),{
,,return 文本
,,}
,,try {
,,return JSON.parse(文本)
,,},catch (err), {
,,return 文本
,,}
,,}
var 才能;xhr =, new XMLHttpRequest ();//才能,自定义,beforeSend 函数
如果才能(option.beforeSend instanceof 函数),{
,,if (option.beforeSend (xhr),===, false), {
,,return 错误的
,,}
,,}
时间=xhr.onreadystatechange 才能;function (), {
,,if (xhr.status ===, 200), {
,,if (xhr.readyState ===, 4), {
,,,//,成功回调
,,,option.onSuccess (getBody (xhr))
,,}
,,}
,,}//才能,请求失败
时间=xhr.onerror 才能;function (err), {
,,option.onError (err)
,,}
xhr.open才能(option.type, option.url,,真的)//才能,当请求为上传文件时回调上传进度
if 才能;(xhr.upload), {
,,xhr.upload.onprogress =, function (事件),{
,,if (event.total 祝辞,0),{
,,,event.percent =, event.loaded /, event.total *, 100;
,,}
,,//,监控上传进度回调
,,if (option.onProgress instanceof 函数),{
,,,option.onProgress(事件)
,,}
,,}
,,}//才能,自定义头部
const 才能;headers =, option.headers | |, {}
for 才能;(var item 拷贝头),{
,,xhr.setRequestHeader(项目,,头[项目])
,,}
xhr.send才能(option.data)
,,}
,
,//测试接口
http({才能
类型:才能,& # 39;文章# 39;
,,url: & # 39;/测试# 39;
,,数据:JSON.stringify ({
,,,的名字:& # 39;yolo& # 39;
}),才能
调用onSuccess才能:function (数据),{
,,console.log(数据)
,,},
onError才能:function (err), {
,,console.log (err)
,,}
})才能
,,. getelementbyid(& # 39;文件# 39;).onchange =, function (), {
var 才能;fileList =, this.files,, formData =, new FormData ();
Array.prototype.forEach.call才能(文件列表,function (文件),{
,,formData.append (file.name,文件)
})才能//,才能当上传的数据为,file 类型时,请求的格式类型自动会变为,多部分/格式,,如果头部格式有特定需求,在我的,http 函数中传入,headers
使用节点。js怎么实现多文件上传?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
