*
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 });
運行結果：
