前端上传文件
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>
