Javascript FileReader.onload在表单提交(POST)后不工作
目前,我正在创建一个单页上传程序。我用Javascript(+jQuery)开发并使用 此上载程序有2个表单,其中上载输入可用。一页中的两个表单和第二个表单都是隐藏的Javascript FileReader.onload在表单提交(POST)后不工作,javascript,jquery,html,node.js,filereader,Javascript,Jquery,Html,Node.js,Filereader,目前,我正在创建一个单页上传程序。我用Javascript(+jQuery)开发并使用 此上载程序有2个表单,其中上载输入可用。一页中的两个表单和第二个表单都是隐藏的display:none 两者都使用相同的自定义上载扩展名 在第一种形式中,我要求两张图片,它们必须被删除 当我放下图像时,它会通过套接字上传到我的nodejs服务器并正确保存 当我再次删除第二个时,它被上传到我的nodejs服务器并正确保存 然后我将表单发布到我的nodejs服务器 然后我.hide()第一个表单和.show()
display:none代码>
两者都使用相同的自定义上载扩展名
- 在第一种形式中,我要求两张图片,它们必须被删除
- 当我放下图像时,它会通过套接字上传到我的nodejs服务器并正确保存
- 当我再次删除第二个时,它被上传到我的nodejs服务器并正确保存
- 然后我将表单发布到我的nodejs服务器
- 然后我
.hide()
第一个表单和.show()
第二个表单
当我再次使用上传插件时,不会出现任何错误,但也不会上传任何文件
我注意到在发布第一个表单后,不会执行FileReader.onload
下面是一些示例代码,我无法发布我的整个应用程序
HTML
Node.js
一旦加载javascript,就会调用函数filedrop,但此时会隐藏form2。从API:
处理程序附加到jQuery中当前选定的元素
对象,因此这些元素必须存在于调用.bind()的点处
发生。有关更灵活的事件绑定,请参阅事件绑定的讨论
.on()或.delegate()中的委托
因为form2是隐藏的,所以从不绑定drop事件,也从不调用其事件处理程序。reader.onload在此事件处理程序中.on
是将事件处理程序函数附加到元素的首选方式
所以改变这个
$this.bind('drop', function(event) {
到
这不起作用,$this.bind('drop',函数(event){
以第二种形式执行。当我在drop事件中执行console.log()
时,它起作用。只有onload不起作用。如果我同时显示两种形式,我的上载程序也起作用。因此,你就在某个地方。
// 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()
}
app.router.post('/formone', function() {
window.showFormTwo()
})
$this.bind('drop', function(event) {
$this.on('drop', function(event) {