0

ボタンがクリックされたときに、作成した PHP スクリプトにファイルをアップロードしようとしています。私は JavaScript を使い始めてまだ数時間ですが、JS の構造と HTML の動的読み込みがまったく理解できません。

メニュー リンクをクリックすると、別のファイルから HTML が正常に読み込まれます。読み込まれる HTML には、送信ボタンが無効になっているファイル アップロード フォームがあります。そのボタンが押されると、サーバーに対して XMLHttpRequest を実行してそのファイルをアップロードしようとしています。私の最初の試みでは、まだ読み込まれていないため、その ID を持つ DOM 要素を見つけることができませんでした。そのため、メニューがクリックされたときに HTML をロードする関数内にその関数を移動しました。現在、null エラーは表示されませんが、ボタンをクリックしても何も起こりませんか? 送信ボタンの onclick イベントが発生しないのはなぜですか?

読み込まれる HTML

<div id="form-wrapper">
<p>
    Please upload a Material List.
</p>
</br>
</br>
<form id="form" method="post" action="#" enctype="multipart/form-data"> 
    <p>                 
        <label class="label" for="file">Material List</label>               
        <input class="file-input" type="file" name="file" id="file"/>                   
    </p>
</br>
</br>
    <p>
        <input id="submit" value="Upload File" disabled="disabled" type="submit"/>
    </p>
</form>
</div>

これは、その HTML をロードし、onclick リスナーを設定することになっている JavaScript です...

$(document).on("click","#mrp-new",function(e){
    $("#container").load("../html/mrp_new_order.html");
    $(document).on("click","#submit",function(e)
    {
        var file = this.files[0];       
        var fd = new FormData();
        fd.append("file", file);        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '../php/mrp_upload.php', true);        

        xhr.upload.onprogress = function(e)
        {
            if (e.lengthComputable)
            {
                var percentComplete = (e.loaded / e.total) * 100;
                console.log(percentComplete + '% uploaded');
            }
        };

        xhr.onload = function()
        {
            if (this.status == 200)
            {
                var resp = JSON.parse(this.response);
                alert('Server got:', resp);
                /*var image = document.createElement('img');
                image.src = resp.dataUrl;
                document.body.appendChild(image);*/
            };
        };      
        xhr.send(fd);
    }, false);
});

助けてくれてありがとう！

ネイサン

4

2 に答える 2

0

オンクリック、またはその問題のリスナーを無効なボタンに設定することはできません。グーグルで少し調べてみた。

私が変更され

<input id="submit" value="Upload File" disabled="disabled" type="submit"/>

に

<button id="submit" type="button"/>

そして、すべてが期待どおりに機能しました。

于 2013-03-21T17:51:22.907 に答える