js实现文件上传功能后台使用MultipartFile

2023-09-08 08:15:05 148

XMLHttpRequest上传文件 //图片上传 varxhr; //上传文件方法 functionUpladFile(){ varfileObj=document.getElementById("file").files[0];//js获取文件对象 varurl="http://localhost:8080"+"/api/attachment/upload";//接收上传文件的后台地址 varform=newFormData();//FormData对象 form.append("file",fileObj);//文件对象 xhr=newXMLHttpRequest();//XMLHttpRequest对象 xhr.open("post",url,true);//post方式，url为服务器请求地址，true该参数规定请求是否异步处理。 xhr.onload=uploadComplete;//请求完成 xhr.onerror=uploadFailed;//请求失败 xhr.upload.onprogress=progressFunction;//【上传进度调用方法实现】 xhr.upload.onloadstart=function(){//上传开始执行方法 ot=newDate().getTime();//设置上传开始时间 oloaded=0;//设置上传开始时，以上传的文件大小为0 }; xhr.send(form);//开始上传，发送form数据 } //上传成功响应 functionuploadComplete(evt){ //服务断接收完文件返回的结果 vardata=JSON.parse(evt.target.responseText); if(data.success){ alert("上传成功！"); }else{ alert("上传失败！"); } } //上传失败 functionuploadFailed(evt){ alert("上传失败！"); } //取消上传 functioncancleUploadFile(){ xhr.abort(); } //上传进度实现方法，上传过程中会频繁调用该方法 functionprogressFunction(evt){ varprogressBar=document.getElementById("progressBar"); varpercentageDiv=document.getElementById("percentage"); //event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0 if(evt.lengthComputable){// progressBar.max=evt.total; progressBar.value=evt.loaded; percentageDiv.innerHTML=Math.round(evt.loaded/evt.total*100)+"%"; } vartime=document.getElementById("time"); varnt=newDate().getTime();//获取当前时间 varpertime=(nt-ot)/1000;//计算出上次调用该方法时到现在的时间差，单位为s ot=newDate().getTime();//重新赋值时间，用于下次计算 varperload=evt.loaded-oloaded;//计算该分段上传的文件大小，单位b oloaded=evt.loaded;//重新赋值已上传文件大小，用以下次计算 //上传速度计算 varspeed=perload/pertime;//单位b/s varbspeed=speed; varunits='b/s';//单位名称 if(speed/1024>1){ speed=speed/1024; units='k/s'; } if(speed/1024>1){ speed=speed/1024; units='M/s'; } speed=speed.toFixed(1); //剩余时间 varresttime=((evt.total-evt.loaded)/bspeed).toFixed(1); time.innerHTML='，速度：'+speed+units+'，剩余时间：'+resttime+'s'; if(bspeed==0)time.innerHTML='上传已取消'; }

js实现文件上传功能 后台使用MultipartFile

热门推荐

随机推荐

js实现文件上传功能后台使用MultipartFile