js实现文件上传，node实现文件上传，html实现文件上传,jquery.form实现文件上传

72 阅读 0 评论 48 点赞

我是靠谱客的博主拼搏魔镜，最近开发中收集的这篇文章主要介绍js实现文件上传，node实现文件上传，html实现文件上传,jquery.form实现文件上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端html及JS代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-1.12.0.min.js"></script>
<script src="./jquery.form.min.js"></script>
</head>
<body>
<form id="upload" enctype="multipart/form-data" method="post" action="/fileupload">
<input type="file" name="file" class="selectFile">
<button id="submitBtn" οnclick="return uploadFile()">确定</button>
</form>
<script>
$("#submitBtn").ajaxSubmit(function(response){
var responseObj = JSON.parse(response);
console.log(responseObj);
});
return false;
</script>
</body>
</html>

注意：

引入jquery.form.min.js文件，调用ajaxSubmit实现文件上传

form属性enctype="multipart/form-data"不可缺少；

script的return false是阻止表单二次提交和跳转

后端node代码如下

upload.js文件代码如下：

var router = require('express').Router();
var multer = require('multer');
var uxconsole = require('./common/log.js');
var gFilename = "";
var fileDir = '';
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, fileDir);
},
filename: function (req, file, callback) {
gFilename = file.originalname;
callback(null, gFilename);
}
});
var upload = multer({storage: storage}).any();
router.post('/', function (req, res, next) {
res.setTimeout(25000, function () {
if (res.finished) {
return;
}
dealWithResult(true, 501, "system timeout");
});
var url = req.url;
if (url.indexOf('dir=') != -1) {
fileDir = url.split('dir=')[1];
} else {
fileDir = process.rootdir;
}
upload(req, res, function (isErr) {
if (res.finished) {
return;
}
if (isErr) {
dealWithResult(true, 200, '上传失败');
} else {
dealWithResult(false, 200, '上传成功');
}
});
function dealWithResult(isErr, headNum, rst) {
var rtRes = {
rstcode: "error",
desc: "上传失败",
data: {}
};
if (isErr) {
rtRes.desc = rst;
} else {
rtRes.rstcode = "success";
rtRes.desc = "上传成功";
rtRes.data.filename = gFilename;
}
// https
// res.writeHead(headNum, {
//
'Access-Control-Allow-Methods': 'OPTIONS, HEAD, POST',
//
'Access-Control-Allow-Origin': '*'
// });
res.write(JSON.stringify(rtRes));
res.end();
}
});
module.exports = router;