节点.js - 使用 ajax 提交表单的一部分,并且强大
Node.js - Submit a part of a form using ajax and formidable
在我的节点.js/express.js应用程序中,我尝试使用ajax发布表单的一部分。为了实现这一点,我阅读了一个使用中间件的示例formidable
。
这是 HTML :
<!-- some form elements -->
<input type="file" id="upload_image" name="upload_image" />
<!-- other form elements with submit -->
客户端脚本:
$(document).ready(function() {
if(document.addEventListener) {
document.getElementById("upload_image").addEventListener("change", function(e){
uploadImages(e);
});
} else {
document.getElementById("upload_image").attachEvent("onchange", function(e){
uploadImages(e);
});
}
function uploadImages(e) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
var onReady = function(e) {
// ready state
if(this.readyState == this.DONE) {
if(this.status != 200) {
console.log('error !!!');
} else {
if(xhr.responseText == 'success') {
console.log('succes !!!');
}
}
}
};
var onError = function(err) {
// something went wrong with upload
console.log('error ...');
};
console.log(e.target.files[0]);
formData.append('files', e.target.files[0]);
xhr.open('post', "/markers/upload_image", true);
xhr.addEventListener('error', onError, false);
xhr.send(formData);
xhr.addEventListener('readystatechange', onReady, false);
}
});
这是服务器端:
router.post('/markers/upload_image', function (req, res) {
//return console.log(req.files.files);
var form = new formidable.IncomingForm();
form.uploadDir = __dirname + 'client/tmp';
form.encoding = 'binary';
form.addListener('file', function(name, file) {
// do something with uploaded file
});
form.addListener('end', function() {
res.end();
});
form.parse(req, function(err, fields, files) {
if (err) {
console.log(err);
}
});
});
然后,这是注释行的结果 return console.log(req.files.files);
:
{ fieldName: 'files',
originalFilename: 'myimage.jpg',
path: '/var/folders/jb/jttwq52s7nn3s18_36y_xq300000gp/T/31093-14r558u.jpg',
headers:
{ 'content-disposition': 'form-data; name="files"; filename="vespa.jpg"',
'content-type': 'image/jpeg' },
ws:
{ _writableState:
{ highWaterMark: 16384,
objectMode: false,
needDrain: true,
ending: true,
ended: true,
finished: true,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
sync: false,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
buffer: [],
errorEmitted: false },
writable: true,
domain: null,
_events: { error: [Object], close: [Object] },
_maxListeners: 10,
path: '/var/folders/jb/jttwq52s7nn3s18_36y_xq300000gp/T/31093-14r558u.jpg',
fd: null,
flags: 'w',
mode: 438,
start: undefined,
pos: undefined,
bytesWritten: 591626,
closed: true },
size: 591626,
name: 'myimage.jpg',
type: 'image/jpeg' }
怎么了?任何帮助将不胜感激。
编辑:返回的错误:
POST /markers/upload_image - - ms - -
Error: Request aborted
at IncomingMessage.onReqAborted (/Users/cedric/Projects/my-project/node_modules/express/node_modules/connect/node_modules/multiparty/index.js:182:17)
at IncomingMessage.emit (events.js:117:20)
at abortIncoming (http.js:1915:11)
at Socket.serverSocketCloseListener (http.js:1927:5)
at Socket.emit (events.js:117:20)
at TCP.close (net.js:465:12)
[Error: Request aborted]
编辑:尝试强大的文档示例,给定相同的错误:
router.get('/test', function(req, res) {
// show a file upload form
res.writeHead(200, {'content-type': 'text/html'});
res.end(
'<form action="/test" enctype="multipart/form-data" method="post">'+
'<input type="text" name="title"><br>'+
'<input type="file" name="upload" multiple="multiple"><br>'+
'<input type="submit" value="Upload">'+
'</form>'
);
});
router.post('/test', function(req, res) {
// parse a file upload
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:'n'n');
res.end(util.inspect({fields: fields, files: files}));
});
return;
});
我找到了解决方案!
我使用快递 3.x ...对于此版本,包括formidable
!
所以,不需要创建一个新的IncomingForm
,只需在请求中使用Formidable
form对象,例如:
/* express server code */
// add this param for multipart processing
router.use(express.bodyParser({defer: true}));
// on the route code, get the Formidable form object from request
var form = req.form;
/* ...*/
希望对您有所帮助!
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何使用WCF服务和javascript表单post上传.doc文件
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 如何使用 JQuery 使表行的一部分可单击
- 在允许用户进入下一部分之前,在表单验证中检查是否单击了某个选项(单选按钮)
- DropzoneJS作为PHP表单的一部分
- 为输入字段(而不是表单的一部分)设置默认按钮(或在 javascript 中触发其事件)的最佳方法
- 节点.js - 使用 ajax 提交表单的一部分,并且强大
- 如何使用文本表单输入的一部分来添加并使其转到 URL
- 是否有一种方法可以在单击按钮时验证表单的一部分,而无需首先提交表单
- jQuery只序列化表单的一部分
- 如何通过Ajax调用表单的一部分
- Jquery遍历表单的一部分
- Ajax -如何使页面上的每个链接/表单只重新加载该页面的一部分
- 通过用户操作触发PHP脚本的一部分,而无需进入新表单
- 当输入值不是表单的一部分时,使用javascript获取输入值
- 用户通过表单提交关键字;我怎样才能得到'关键词'搜索URL的一部分,以便在页面中进行修改
- 如何使表单输入的一部分的网站目的地
- jQuery按钮一次验证表单的一部分
- 如何发送jQuery自动完成类别作为表单提交的一部分