您的位置：首页 > Web前端 > Node.js

Node和express中利用Jquery的$.ajax和HTML5的FormData完成文件上传示例

2016-06-01 22:25 796 查看

Node和express中利用Jquery的$.ajax和HTML5的FormData完成文件上传示例

注：本文只讨论利用FormData完成简单的文件上传功能，关于FormData的其他信息请参阅官方文档。例如:MDN中关于FormData的信息

————————————–

下面这个demo展示了一个完整的例子，包括前台页面部分，Jquery的.ajax函数的处理部分和后台处理部分。为突出重点页面只写了必要的几个标签。应该注意的部分我会重点标出来。

前台页面部分

–前台页面部分需要注意的有下面两点，其他和一般时候我们写的表单没什么区别：

form标签的属性中加上enctype=”multipart/form-data”;

注意input标签的name属性的取名，后台通过input元素name属性的值获取其中的内容(其实这里不只是后台取得input元素中用户输入内容的方式，也是取得select等元素中用户输入内容的方式)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo of HTML5 form-data by shad0w</title>
</head>
<body>
<h1>demo of HTML5 form-data</h1>
<form id="form-demo" enctype="multipart/form-data",action="javascript:">
<label for="id-txt">要传递的文本信息</label>
<input type="text" id="id-txt" name="name_txt"/>
<br><br>
<label for="id-file">选择上传的文件</label>
<input type="file" id="id-file" name="file" />
<br><br>
<button id="sub-btn">提交</button>
</form>
<script type="text/javascript" src="jquery.min.js" ></script>
</body>
</html>

Jquery.ajax方法处理部分

–需要注意的是：

创建一个FormData对象，具体请看注释；

将data设置为新创建的FormData对象,

注意$.ajax函数的头信息值设置为false；即contentType: false

$(document).ready(function () {

$("#id-form").on('click','#sub-btn',function () {

/*
创建一个FormData对象,注意参数(可选) 一个HTML表单元素,
表单的信息都包含在了这个新的FromData对象中，可以在后台将它们取出:
--文本信息用 req.body.nameOfElement取出，如req.body.name_txt;
--文件信息用fs模块和path模块解析,后面会有实例
*/
var formData = new FormData($("#id-form")[0]);

//还可以用append方法添加一些附加信息参数为(name,value)，如下面的代码：
//formData.append('nickName','Jack');//-->后台用req.body.nickName将值'Jack'取出

$.ajax({
url: '/fileupload',
type: 'POST',
data: formData,//<----要传输的数据
async: false,
cache: false,
timeout:100,
contentType: false,//<----头信息设置为false
processData: false,
success: function(data){
if(data.result === 'success'){
alert("文件上传成功");
}else if(data.result === 'fail'){
alert('文件上传失败：原因是' + data.reason);
}
},
error: function(xhr){
alert('文件上传失败：原因是' + xhr.status);
}
});//end ajax
});//end event
});

后台处理部分

–需要注意的是：

先引入fs和path模块;

注意

注意$.ajax函数的头信息值设置为false；即contentType: false

app.post('/fileupload',function (req, res) {

//将表单中name是name_txt的input元素中的文本内容取出
var txtFromFront = req.body.name_txt;

//获取上传的文件的文件名和绝对路径,注意先引入fs和path模块
var oriNameOfFile = req.files.name_file.originalFilename || path.basename(req.files.name_file.ws.path);
var oriPathOfFile = req.files.name_file.path;

//定义文件的输出路径，我在此处没有改变上传的文件名，具体可以按照需求改变输出路径和文件名
var targetPathOfFile = '/Music_Lib/public/demo_file/' + oriNameOfFile;

//读取和输出文件到目标路径
fs.readFile(oriPathOfFile,function (err, data) {

fs.writeFile(targetPathOfFile,data,function (err) {

if(err){
console.log('文件在存储过程中出错了：' + err);

res.send({result:"fail",reason:"保存文件失败"});//将消息发送(回复)给请求的ajax
}else {
console.log('File saved successfully!');

res.send({result:"success"});//将消息发送(回复)给请求的ajax
}
});
});
});

以上。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery express html5 node

相关文章推荐

新的分享

章节导航