HTML5——XMLHttpRequest 2：基于Node.js的用户修改头像

最新推荐文章于 2024-05-23 09:30:17 发布

is_Del

最新推荐文章于 2024-05-23 09:30:17 发布

阅读量382

点赞数

分类专栏： HTML5 Node.js 文章标签： html5 node.js javascript

本文链接：https://blog.csdn.net/del1026/article/details/115906714

版权

这篇博客介绍了如何使用HTML5的XMLHttpRequest 2特性，结合Node.js和相关库，实现用户修改头像的功能。内容包括Node.js环境配置、项目初始化、框架安装、路由配置、页面实现以及详细步骤。在实现过程中，需要注意数据类型匹配和错误处理，如400 Bad Request错误。

摘要由CSDN通过智能技术生成

Day13

今日份内容：使用XMLHttpRequest 2制作基于Node.js的用户修改头像

在HTML5规范中对XMLHttpRequest对象的send()方法进行改良后，其可以发送字符串、document对象、表单数据、Blob对象、文件以及ArrayBuffer对象。

XMLHttpRequest 2

了解XMLHttpRequest与服务器异步交互
使用XMLHttpRequest向服务器提交数据

内容

配置Node.js环境
项目初始化
安装body-parser、connect-multiparty、express框架
路由配置实现
页面实现

代码

//项目的文件入口，包含路由配置等。
var express = require('express');
//connect-multiparty用于解决文件上传问题
var mutipart = require('connect-multiparty');

var mutipartMiddeware = mutipart();
var app = express();
//将静态文件目录设置为"根目录+/public"
app.use(express.static('public'));
//修改临时文件储存位置
app.use(mutipart({
   
	uploadDir: './public/uploadFolder'
}));
//设置HTTP服务监听的端口号
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
   
	console.log("Express started on localhost:" + app.get('port') + '; press Ctrl-C to terminate.');
});
//以下为路由配置
//1.当访问localhost:3000时。默认访问的页面
app.get('/', function(req, res) {
   
	res.type('text/html');
	res.sendFile(__dirname + '/HTML5Camera&Upload.html');
});
//2.当用户使用post方式提交表单到/upload服务时，读取表单内容并将文件上传
app.post('/upload', mutipartMiddeware, function(req, res) {
   
	console.log(req.body.name + "\n=========\n");
	//这里打印可以看到接收文件的信息
	console.log(req.files.file.path + "\n=========\n");
	var jsonObject = {
   };
	//默认路径为：public\uploadFolder\aYm65V_E0Zn1ho5lDd,需要将public\部分去掉
	var path = req.files.file.path;
	path = path.substring(path.indexOf("\\"));
	console.log(path);
	jsonObject.image = path;
	jsonObject.msg = "文件上传成功!"
	//给浏览器返回成功提示
	res.send(jsonObject);
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拍照上传</title>
		<link rel="stylesheet" type="text/css" href="styles/css/main.css" />
	</head>
	<body>
		<div class="container">
			<div class="header">
				<div class="head-img">
					<img id="uploadImage" src="styles/images/pdx2.jpeg">
					<div class="