2

現時点では、単一ページのアップローダーを作成しています。私は Javascript (+jQuery) で開発し、AppJSを使用しています。

このアップローダには、アップロード入力が可能な 2 つのフォームがあります。両方のフォームが 1 ページにあり、2 番目のフォームは非表示ですdisplay: none;

どちらも同じカスタムメイドのアップロード拡張機能を使用します。

  • 最初のフォームで 2 つの画像を要求しましたが、それらは削除する必要があります。

  • 画像をドロップすると、ソケット経由で nodejs サーバーにアップロードされ、正しく保存されます。

  • 2番目のものをドロップすると、再び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()
})
4

1 に答える 1

0

関数 filedrop は JavaScript が読み込まれるとすぐに呼び出されますが、そのとき form2 は非表示になります。バインドAPIから:

ハンドラーは、jQuery オブジェクトで現在選択されている要素に関連付けられているため、.bind() への呼び出しが発生した時点でそれらの要素が存在している必要があります。より柔軟なイベント バインディングについては、.on() または .delegate() でのイベント委任の説明を参照してください。

したがって、form2 は非表示になっているため、ドロップ イベントはバインドされず、そのイベント ハンドラーが呼び出されることもありません。reader.onload は、このイベント ハンドラー内にあります。.onイベント ハンドラー関数を要素にアタッチするための推奨される方法です。

だからこれを変える

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

に

$this.on('drop', function(event) {
于 2013-03-26T17:57:57.797 に答える