Ajax--FormData实现二进制文件上传
Posted 初铮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax--FormData实现二进制文件上传相关的知识，希望对你有一定的参考价值。
*
FormData二进制文件上传
<input type="file" name="file"/>
var file=document.getElementById(\'file\');
//当用户选择文件的时候
file.onchange=function(){
//创建空表单对象
var formdata=new FormData();
//将用户选择的二进制文件追加到表单对象中
formData.append(\'attrName\',this.files[0]);
//配置ajax对象，请求方式必须为post
xhr.open(\'post\',\'http://localhost:3000/formDataFile\');
xhr.send(formData);
}
*
//FormData文件上传进度展示
//当用户选择文件的时候
file.onchange=function(){
//文件上传过程中持续触发onprogress事件
xhr.upload.onprogress=function(ev){
//当前上传文件大小/文件总大小 再将结果转换为百分数
//将结果赋值给进度条的宽度属性
bar.style.width=(ev.load/ev.total)*100+"%";
}
}
*
//FormData文件上传图片即时预览
在我们将图片上传到服务器端以后，服务器通常都会将图片地址做为响应数据传递到客户端
客户端可以从响应数据中获取图片地址，然后将图片再显示再页面中。
.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>07FormData实现二进制文件上传</title> 6 <link rel="stylesheet" type="text/css" href="/assets/bootstrap/dist/css/bootstrap.min.css"> 7 <style type="text/css"> 8 .container{ 9 padding:-top:60px; 10 } 11 .padding{ 12 padding:5px 0 20px 0; 13 } 14 .progress{ 15 background-color: gray; 16 } 17 .progress-bar{ 18 background-color: skyblue; 19 text-align: center; 20 } 21 </style> 22 </head> 23 <body class="test"> 24 <div class="container"> 25 <div class=form-group> 26 <label>请选择文件</label> 27 <input type="file" id="file"> 28 <div class="padding" id="box"> 29 <img src="" class="img-round img-responsive" id="img"> 30 </div> 31 <div class="progress"> 32 <div class="progress-bar" style="width:0%;" id="bar">0%</div> 33 </div> 34 </div> 35 </div> 36 <script type="text/javascript"> 37 //获取文件选择控件 38 var file=document.getElementById(\'file\'); 39 //获取进度条元素 40 var bar=document.getElementById("bar"); 41 var img=document.getElementById("img"); 42 var box=document.getElementById("box"); 43 //为用户选择控件添加onchange事件 44 //在用户选择文件时触发 45 file.onchange=function(){ 46 //创建空的FormData的表单对象 47 var formData=new FormData(); 48 //将用户选择的文件追加到formData表单对象中 49 formData.append(\'attrName\',this.files[0]); 50 //发送ajax请求 51 var xhr=new XMLHttpRequest(); 52 xhr.open(\'post\',\'http://localhost:3000/upload\'); 53 //在文件上传的过程中持续触发 54 xhr.upload.onprogress=function(ev){ 55 //ev.loaded 文件已经上传了多少 56 //ev.total 上传文件的总大小 57 var result=parseInt((ev.loaded/ev.total)*100)+"%"; 58 //设置进度条宽度 59 bar.style.width=result; 60 //将百分比显示在进度条中 61 bar.innerHTML=result; 62 console.log(ev) 63 }; 64 xhr.send(formData); 65 xhr.onload=function(){ 66 if(xhr.status==200){ 67 //console.log(xhr.responseText); 68 var result=JSON.parse(xhr.responseText); 69 //动态创建img表单 70 // var img2=document.createElement("img"); 71 //给图片标签设置src属性 72 console.log(result.path); 73 img.src=result.path; 74 // img2.src=result.path; 75 //当图片加载完成以后 76 // img2.onload=function(){ 77 //将图片显示在页面中 78 // box.appendChild(img2); 79 //} 80 } 81 } 82 83 } 84 85 </script> 86 87 </body> 88 </html>
app.js
1 app.post(\'/upload\',(req,res)=>{ 2 //创建formidable表单解析对象 3 const form=new formidable.IncomingForm(); 4 //设置客户端上传文件的存储路径 5 form.uploadDir=path.join(__dirname,\'public\',\'uploads\'); 6 //保留上传文件的后缀名字 7 form.keepExtensions=true; 8 //解析客户端传递过来的FormData对象 9 form.parse(req,(err,fields,files)=>{ 10 //将客户端传递过来的地址响应到客户端 11 console.log(files.attrName.path.split(\'public\')[1]) 12 res.send({ 13 path:files.attrName.path.split(\'public\')[1] 14 }); 15 }); 16 17 });
运行结果：
以上是关于Ajax--FormData实现二进制文件上传的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot+ajax+formData实现图片上传和回显
ajax+FormData+javascript实现无刷新表单信息提交