上传文件，主要是ajax方式

wp231957 · 发表于 2021-7-2 16:38:27

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

let express = require('express');
let http = require('http');
let fs = require('fs');
let path = require("path");
let multer = require("multer");
let app = express();
let upload = multer({
dest: "upload" //上传文件存放路径
});
app.use(express.static(path.join(__dirname, 'upload')));
let singleMidle = upload.single("singleFile"); //一次处理一张
let singleMidle2 = upload.single("sigfile"); //一次处理一张
let arrMidle = upload.array("arrayFile", 5); //一次最多处理5张
let arrMidle2 = upload.array("mulfile", 5); //一次最多处理5张
app.post("/multer/singup", singleMidle, function(req, res) {
res.send(req.file);
});
app.post('/multer/arrup', arrMidle, function(req, res) {
console.log(req.files);
res.send(req.files);
});
app.post('/ajaxupload', arrMidle2, function(req, res) {
console.log(req.files);
res.send(req.files);
});
app.post('/ajaxsigupload', singleMidle2, function(req, res) {
console.log(req.file);
res.send(req.file);
});
app.get('/', function(req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
url2 = "./testip.html";
fs.readFile(url2, 'utf-8', function(err, data) {
if (err) {
throw err;
}
res.end(data);
});
})
app.all('*', function(req, res, next) {　　
res.header("Access-Control-Allow-Origin", "*");　　
res.header('Access-Control-Allow-Headers', '*');　　
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");　　
next();
});
app.listen(3000);
console.log("请使用http://localhost:3000/访问主页，或者http://127.0.0.1:3000/访问主页");

复制代码

wp231957 · 发表于 2021-7-2 16:38:57

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>文件上传演示案例</title>
</head>
<body>
<form class="" action="/multer/singup" method="post" enctype="multipart/form-data">
<input type="file" name="singleFile" value="">
<input type="submit" name="" value="单一文件上传">
</form>
<form class="" action="/multer/arrup" method="post" enctype="multipart/form-data">
<input type="file" name="arrayFile" value="" multiple>
<input type="submit" name="" value="多文件上传">
</form>
<form id="sig" enctype="multipart/form-data">
<input type="file" name="sigfile" value="">
<input type="button" id="ajaxsigupload" value="AJAX单文件上传">
</form>
<form id="mul" enctype="multipart/form-data">
<input type="file" name="mulfile" value="" multiple>
<input type="button" id="ajaxupload" value="AJAX多文件上传">
</form>
<img src="upload/3.png" />
<script>
$('#ajaxupload').on('click', function() {
var type = "file";
var formData = new FormData($("#mul")[0]); //这里需要实例化一个FormData来进行文件上传
//console.log(formData);
$.ajax({
type: "post",
url: "/ajaxupload",
data: formData,
processData: false,
contentType: false,
success: function(hdata) {
if (hdata) {
var i;
for (i = 0; i < hdata.length; i++) {
document.write("<img src=" + hdata[i]["path"] + "/>");
}
} else {
console.log("失败了");
}
},
error: function(data, XMLHttpRequest, textStatus, errorThrown) {
console.log(data);
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
});
$('#ajaxsigupload').on('click', function() {
var type = "file";
var formData = new FormData($("#sig")[0]); //这里需要实例化一个FormData来进行文件上传
console.log(formData);
$.ajax({
type: "post",
url: "/ajaxsigupload",
data: formData,
processData: false,
contentType: false,
success: function(hdata) {
if (hdata) {
console.log(hdata);
} else {
console.log("失败了");
}
},
error: function(data, XMLHttpRequest, textStatus, errorThrown) {
console.log(data);
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
});
</script>
</body>
</html>

复制代码

wp231957 · 发表于 2021-7-2 19:50:50

更改一个致命的代码
app.use('/upload', express.static(__dirname + '/upload'));

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 上传文件，主要是ajax方式

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块