파일 업로드 기능을 구현하기 위한 Ajax 및 node.js 멀티터에 대한 자세한 설명
- 小云云원래의
- 2017-12-25 10:50:581297검색
노드 초보자로서 현재 등록, 로그인, 온라인 1인 및 다인 채팅, 이모티콘 전송, 다양한 파일 업로드 및 다운로드, 친구 추가 및 삭제, 채팅 기록 저장, 알림음 전환, 및 배경 이미지 전환 등의 기능이 있어서 multer 모듈을 사용했습니다. 다양한 문서 검색과 데모 예제를 거쳐 마침내 대부분의 파일 형식 업로드를 지원하고 웹 페이지에 표시하는 단일 파일 업로드 기능을 성공적으로 구현했습니다. 동시에 이 글에서는 Ajax를 주로 소개하고, node js Multer가 파일 업로드 기능을 구현하고 있으니, 필요하신 분들은 참고하시면 좋겠습니다.
Effect
WeChat이 바로 보이는 느낌인가요? 네, WeChat의 웹 버전을 기반으로 합니다.
프론트엔드에서는 CSS와 HTML로 해야 합니다. 초보자분들, 1부 블로그 포스팅이 정말 급합니다. 조만간 코드는 github에 올릴 예정입니다. 관심 있는 친구들은 아래에서 직접 올려보시면 됩니다. cmd 명령 창을 통해 직접 구성
install
multer 설치
npm install multer -save
서버 코드
//引入http
const http=require("http");
//引入express
const express=require("express");
//引入multer
const multer=require("multer");
//创建服务器，绑定监听端口
var app=express();
var server=http.createServer(app);
server.listen(8081);
//建立public文件夹，将HTML文件放入其中，允许访问
app.use(express.static("public"));
//文件上传所需代码
//设置文件上传路径和文件命名
var storage = multer.diskStorage({
destination: function (req, file, cb){
//文件上传成功后会放入public下的upload文件夹
cb(null, './public/upload')
},
filename: function (req, file, cb){
//设置文件的名字为其原本的名字，也可以添加其他字符，来区别相同文件，例如file.originalname+new Date().getTime();利用时间来区分
cb(null, file.originalname)
}
});
var upload = multer({
storage: storage
});
//处理来自页面的ajax请求。single文件上传
app.post('/upload', upload.single('file'), function (req, res, next) {
//拼接文件上传后的网络路径，
var url = 'http://' + req.headers.host + '/upload/' + req.file.originalname;
//将其发回客户端
res.json({
code : 1,
data : url
});
res.end();
});
클라이언트 코드
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--依托于jquery-->
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<p class="container">
<label>file</label>
<input type="file" name="file" id="file">
</p>
<script>
var file=$("#file")[0];
//这里使用的是onchange事件，所以当你选择完文件之后，就触发事件上传
file.onchange=function(){
//创建一个FormDate
var formData=new FormData();
//将文件信息追加到其中
formData.append('file',file.files[0]);
//利用split切割，拿到上传文件的格式
var src=file.files[0].name,
formart=src.split(".")[1];
//使用if判断上传文件格式是否符合
if(formart=="jpg"||formart=="png"||
formart=="docx"||formart=="txt"||
formart=="ppt"||formart=="xlsx"||
formart=="zip"||formart=="rar"||
formart=="doc"){
//只有满足以上格式时，才会触发ajax请求
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data){
//上传成功之后，返回对象data
if(data.code>0){
var src=data.data;
//利用返回值src 网络路径，来实现上传文档的下载
if(formart=="docx"||formart=="txt"||formart=="doc"){
//结合css样式，实现显示图标
var className="docx";
//拼接html，生成到页面上去
var msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
}else if(formart=="ppt"){
//PPT 格式
className="ppt";
msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
}else if(formart=="xlsx"){
//xlsx 格式
className="xlsx";
msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
}else if(formart=="zip"||formart=="rar"){
//zip || rar 格式
className="zip";
msg=`<a href="${src}" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="${className}"></i></a>`;
}else{
//所有的图片格式
msg=`<a href="javascript:;" rel="external nofollow" class="picCheck"><img src="${src}"></a>`;
}
// 这里将msg 追加到你要显示的区域
}
}
//不满足上传格式时
}else{
alert("文件格式不支持上传")
}
}
</script>
</body>
</html>
관련 권장 사항:
multer 정의 및 사용 요약nodejs multer 사용에 대한 예제 튜토리얼 공유 파일 업로드 및 다운로드 구현
기반 파일 업로드 예제위 내용은 파일 업로드 기능을 구현하기 위한 Ajax 및 node.js 멀티터에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.