表单提交（POST）后Javascript FileReader.onload不起作用

Question

目前我正在创建一个单页上传器。我用 Javascript (+jQuery) 开发，我使用AppJS。

此上传器有 2 个表单，可用于上传输入。两个表格都在一页中，第二个表格被隐藏display: none;

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

• 在第一种形式中，我要求 2 张图片，它们必须被丢弃。

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

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

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

• 然后我.hide()第一个表格和.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()
})

Answer 1

一旦加载 javascript，就会调用函数 filedrop，但您的 form2 会被隐藏。来自bind API：

处理程序附加到 jQuery 中当前选定的元素 对象，因此这些元素必须存在于对 .bind() 的调用处 发生。更灵活的事件绑定见事件的讨论 .on() 或 .delegate() 中的委托。

所以因为 form2 是隐藏的，所以永远不会绑定 drop 事件，并且永远不会调用它的事件处理程序。 reader.onload 在此事件处理程序中。 .on 是将事件处理函数附加到元素的首选方式。

所以改变这个

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

到

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