表单提交后(POST)JavaScript FileReader.onload不工作

目前我正在创build单页上传器。 我使用Javascript(+ jQuery)进行开发,并使用AppJS 。

这个上传器有两种forms,上传input可用。 第一种forms和第二种forms都是隐藏display: none;

两者都使用相同的自定义上传扩展名。

  • 在第一个forms我要求2张图片,他们不得不放弃。

  • 当我删除图像时,它通过套接字上传到我的nodejs服务器并保存正确。

  • 当我删除第二个,再次,它被上传到我的nodejs服务器,并保存正确。

  • 然后我将表单发布到我的nodejs服务器

  • 之后,我.hide()第一个forms和.show()第二个。

当我再次使用上传插件时,不会出现错误,也不会上传任何文件。

我注意到FileReader.onload不会在第一个表单发布之后执行。

在一些示例代码下面,我不能发布我的整个应用程序。

HTML

 <form id="formone" action="/formone"> <input type="text" name="background" value="Drop here" class="uploadinput" readonly /> <input type="text" name="logo" value="Drop here" class="uploadinput" readonly /> </form> <form id="formtwo" action="/formtwo" style="display:none;"> <input type="text" name="icon" value="Drop here" class="uploadinput" readonly /> </form> 

使用Javascript

 // File upload extension $.fn.extend({ filedrop: function() { return this.each(function() { var files = [] var $this = $(this) // Catch drop event $this.bind('drop', function(event) { event.stopPropagation() event.preventDefault() console.log('Dropped') // Works in both forms files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files file = files[0] var reader = new FileReader() // reader.onload only works in form 1 reader.onload = function(e) { var buffer = e.target.result socket.emit('uploadfile', file.name, buffer) } reader.onerror = function(error) { console.log("error", error) console.log(error.getMessage()) } reader.readAsBinaryString(file) return false }) }) } }) $('.uploadinput').filedrop() window.showFormTwo = function() { $('#formone').hide() $('#formtwo').show() } 

Node.js的

 app.router.post('/formone', function() { window.showFormTwo() }) 

javascript函数一旦加载,函数就会被调用,但是你的form2是隐藏的。 从绑定 API:

处理程序被附加到jQuery对象中当前选定的元素,所以这些元素必须存在于对.bind()的调用发生的地方。 为了更灵活的事件绑定,请参阅.on()或.delegate()中的事件委托的讨论。

因此,因为form2是隐藏的drop事件永远不会被绑定,并且其事件处理程序永远不会被调用。 reader.onload在这个事件处理程序里面。 .on是将事件处理函数附加到元素的首选方法。

所以改变这一点

 $this.bind('drop', function(event) { 

 $this.on('drop', function(event) { 

好吧,也许很奇怪,但我find了解决这个问题的方法。

当我只是发布到nodejs服务器,我的FileReader.onload()函数不再工作。

但是当我使用jQuery $.post()我的FileReader.onload()函数工作!

所以我想post(request)会删除我的FileReader的事件监听器吗?