I am on express3.x and using formidable
我在express3.x并使用强大的
app.post "/up",(req,res)->
formidable = require('formidable')
form = new formidable.IncomingForm()
form.uploadDir = __dirname + "/uploads"
form.encoding = 'binary'
form.addListener 'file',(name,file) ->
#write file
console.log('file uploaded')
return
console.log('$$$$$$$$$$$')
form.addListener 'end', ->
console.log('end')
res.end()
return
console.log('@@@@@$$$$')
form.parse req,(err,fields,files)->
console.log('parse')
console.log(err) if(err)
return
console.log('######')
return
and the upload form is
上传表格是
block content
:coffeescript
$ ->
formData = new FormData()
xhr = new XMLHttpRequest()
onProgress = (e)->
per_complete = (e.loaded/e.total) * 100 if e.lengthComputable
onReady = (e)->
alert("Ready")
onError = (err)->
alert("Error Loading "+err)
$('#upload').click (e)->
formData.append('img',document.getElementById('img').files[0])
xhr.open('post','/up',true)
xhr.addEventListener('error',onError,false)
xhr.addEventListener('progress',onProgress,false)
xhr.send(formData)
xhr.addEventListener('readystatechange',onReady,false)
h1 hello world
form
|select Image:
input(type='file',name='img', id='img')
input(type='button',value='button', id='upload')
none of events are getting triggered...Not sure what am I my missing..
没有任何事件被触发......不确定我错过了什么
4 个解决方案
#1
3
if you use app.use(express.bodyParser())
is equivalent to:
如果你使用app.use(express.bodyParser())相当于:
app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());
you can remove app.use(express.multipart());
then you can use formidable object.
你可以删除app.use(express.multipart());那么你可以使用强大的对象。
#2
2
express is using formidable internally, so your formidable doesn't get any events, if you would like to use formidable on your own you have to remove multipart/form-data
from the bodyParser
express在内部使用强大的,所以你的强大不会得到任何事件,如果你想自己使用强大的你必须从bodyParser中删除multipart / form-data
i am still on express 2.x but that should also do the trick on 3.x, in your app.configure function try
我仍然在快递2.x,但这也应该在你的app.configure函数尝试3.x上的技巧
app.configure(function(){
delete express.bodyParser.parse['multipart/form-data']
})
now you can use formidable on your own.
现在你可以自己使用强大的。
#3
1
Is there a specific reason why you are using formidable and not the built in bodyParser? It uses the multipart middleware and is based on formidable. Therefore most of the options from formidable can also be applied to the bodyParser. For example:
您是否有使用强力而不是内置bodyParser的特定原因?它使用多部分中间件并基于强大的。因此,来自强大的大多数选项也可以应用于bodyParser。例如:
app.use(connect.multipart({ uploadDir: path }));
To answer your question, try the following code:
要回答您的问题,请尝试以下代码:
app.js
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.post("/", function(req, res) {
console.log(req.files.img)
res.end()
})
index.jade
form
input(type="file", name="img", id="img")
input(type="button", value="button", id="upload")
script
var formdata = new FormData()
var xhr = new XMLHttpRequest()
$("#upload").on("click", function(e) {
xhr.upload.onprogress = function(evt) {
console.log("While sending and loading data.")
if (evt.lengthComputable) {
console.log (evt.loaded / evt.total * 100);
}
}
xhr.onloadend = function(evt) {
console.log("When the request has completed (either in success or failure).")
}
xhr.onload = function(evt) {
console.log("When the request has successfully completed.")
}
var image = document.getElementById('img').files[0]
formdata.append("img", image)
xhr.open("POST", "/", true)
xhr.send(formdata)
})
Have a look at the W3C Specifications for more events.
有关更多活动,请查看W3C规范。
#4
1
I had the same issue in which the file was uploaded completly before My controller got arround to proccessing it. The events were fired but I wasn't listening yet. To counter act this I wrote a middleware to capture file uploads and keep them around for controller to access later.
我遇到了同样的问题,在我的控制器完成处理之前,文件是完全上传的。事件被解雇但我还没有听。为了反击行为,我编写了一个中间件来捕获文件上传并保留它们以供控制器稍后访问。
https://gist.github.com/3813103
you can implement it with
你可以实现它
var fileHandler = require('./middleware/fileHandler');
app.use(fileHandler());
#1
3
if you use app.use(express.bodyParser())
is equivalent to:
如果你使用app.use(express.bodyParser())相当于:
app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());
you can remove app.use(express.multipart());
then you can use formidable object.
你可以删除app.use(express.multipart());那么你可以使用强大的对象。
#2
2
express is using formidable internally, so your formidable doesn't get any events, if you would like to use formidable on your own you have to remove multipart/form-data
from the bodyParser
express在内部使用强大的,所以你的强大不会得到任何事件,如果你想自己使用强大的你必须从bodyParser中删除multipart / form-data
i am still on express 2.x but that should also do the trick on 3.x, in your app.configure function try
我仍然在快递2.x,但这也应该在你的app.configure函数尝试3.x上的技巧
app.configure(function(){
delete express.bodyParser.parse['multipart/form-data']
})
now you can use formidable on your own.
现在你可以自己使用强大的。
#3
1
Is there a specific reason why you are using formidable and not the built in bodyParser? It uses the multipart middleware and is based on formidable. Therefore most of the options from formidable can also be applied to the bodyParser. For example:
您是否有使用强力而不是内置bodyParser的特定原因?它使用多部分中间件并基于强大的。因此,来自强大的大多数选项也可以应用于bodyParser。例如:
app.use(connect.multipart({ uploadDir: path }));
To answer your question, try the following code:
要回答您的问题,请尝试以下代码:
app.js
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.post("/", function(req, res) {
console.log(req.files.img)
res.end()
})
index.jade
form
input(type="file", name="img", id="img")
input(type="button", value="button", id="upload")
script
var formdata = new FormData()
var xhr = new XMLHttpRequest()
$("#upload").on("click", function(e) {
xhr.upload.onprogress = function(evt) {
console.log("While sending and loading data.")
if (evt.lengthComputable) {
console.log (evt.loaded / evt.total * 100);
}
}
xhr.onloadend = function(evt) {
console.log("When the request has completed (either in success or failure).")
}
xhr.onload = function(evt) {
console.log("When the request has successfully completed.")
}
var image = document.getElementById('img').files[0]
formdata.append("img", image)
xhr.open("POST", "/", true)
xhr.send(formdata)
})
Have a look at the W3C Specifications for more events.
有关更多活动,请查看W3C规范。
#4
1
I had the same issue in which the file was uploaded completly before My controller got arround to proccessing it. The events were fired but I wasn't listening yet. To counter act this I wrote a middleware to capture file uploads and keep them around for controller to access later.
我遇到了同样的问题,在我的控制器完成处理之前,文件是完全上传的。事件被解雇但我还没有听。为了反击行为,我编写了一个中间件来捕获文件上传并保留它们以供控制器稍后访问。
https://gist.github.com/3813103
you can implement it with
你可以实现它
var fileHandler = require('./middleware/fileHandler');
app.use(fileHandler());