Ajax--FormData实现二进制文件上传

 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>

 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 });