1.后端代碼
Node.js Express 框架
var express = require('express');
var app = express();
//引入中間件
var formidable = require('formidable')
//監聽路由
app.post('/file_upload', function (req, res) {
console.log('接收到請求')
//創建實例
var form = new formidable.IncomingForm();
//設置上傳文件存放的目錄
form.uploadDir = "./uploads"
//保持原來的文件的擴展名
form.keepExtensions = true;
//解析表單（異步）
form.parse(req, function(err, fields, files) {
//打印普通參數
console.log(fields)
//打印當前文件信息
console.log(files)
res.send("表單處理完成")
});
})
var server = app.listen(8001, function () {
console.log("應用實例，訪問地址為 http://127.0.0.1:8001")
})
2.使用form表單上傳文件
- 請求使用post方法
- 設置enctype="multipart/form-data"
<body style="padding:30px;">
<form action="http://127.0.0.1:8001/file_upload" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>上傳信息</legend>
<div>
<input type="text" name="title">
</div>
<br>
<div>
<input type="file" name="fileUpload">
</div>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
后台打印：
3.使用FormData()上傳
可以將表單中的信息添加到formData()對象中，再使用ajax進行數據傳遞。
FormData傳輸的數據格式和表單通過submit()方法傳輸的數據格式相同
通過formData.append('key',value)向formData()對象添加數據
注意：
(1)不要產生跨域，要阻止表單的默認事件。
(2)要設置兩個屬性為false：contentType/processData
<body style="padding:30px;">
<form action="">
<fieldset>
<legend>上傳信息</legend>
<div>
<input type="text" id="title" required placeholder="輸入圖片名稱">
</div>
<br>
<div>
<input type="file" id="fileUpload" accept="image/*">
</div>
<br>
<!-- 替換成普通的按鈕 -->
<button onclick="uploadFile(event)">使用ajax提交數據</button>
</fieldset>
</form>
</body>
<script>
//定義函數
function uploadFile(event){
//阻止默認事件
event.preventDefault()
//獲取輸入的內容
var title = document.querySelector("#title").value
var file = document.querySelector("#fileUpload").files[0]
//創建formData()對象
var formData = new FormData()
//將輸入的內容添加到formData()對象中
formData.append("title",title)
formData.append("file",file)
//使用jquey的ajax發送post請求
$.ajax({
url:"http://127.0.0.1:8001/file_upload",
type:"POST",
contentType: false,//contentType默認是："application/x-www-form-urlencoded",我們這里要上傳文件,所以將contentType設置為false，告訴jq不要去設置Content-Type請求頭
processData: false,//要上傳的數據本身就是FormData對象，不需要對數據做處理，無需轉換為查詢字符串。
data:formData,
success:function(res){
alert(res)
}
})
}
</script>
直接打印FormData無法得到文件的內容：
4.使用FileReader()上傳圖片
HTML5的新api，兼容性也不是特別好，只兼容到了IE10。
通過將圖片轉換成base64（字符串格式）發送給后台，不過這樣我們前面的后台代碼就無法直接獲取到上傳的文件了
<script>
//定義函數
function uploadFile(event){
//阻止默認事件
event.preventDefault()
//獲取輸入的內容
var title = document.querySelector("#title").value
var file = document.querySelector("#fileUpload").files[0]
//創建reader對象
var reader = new FileReader()
//讀取選擇的文件
reader.readAsDataURL(file)
//監聽讀取事件
reader.onload = function(){
//將輸入的內容添加到要發送的對象中
var data = {}
data.title = title
data.file = reader.result
//使用jquey的ajax發送post請求
$.ajax({
url:"http://127.0.0.1:8001/file_upload",
type:"POST",
data:data,
success:function(res){
alert(res)
}
})
}
}
</script>