0

我正在尝试将文件上传到单击按钮时创建的 PHP 脚本。我才刚开始接触 JavaScript 的前几个小时，我真的不明白 JS v Dynamically Loading 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

阅读有关文档就绪的信息- $.ready和 Ajax call with jQuery here。

加载函数作为第二个参数可以使用加载完成后调用的函数。关联

$("#container").load("../html/mrp_new_order.html", function() {
   alert('Load was performed.');
});

尝试收听表单的提交事件

$("#container").load("../html/mrp_new_order.html", function() {
    $('#form').submit(function() {
      alert('Submit button was pressed');
      return false;
    });
});
于 2013-03-21T15:32:28.837 回答
0

您不能将 onclick 或任何与此相关的侦听器设置为禁用按钮。我在谷歌搜索了一下之后才发现。

我变了

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

到

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

一切都按预期工作。

于 2013-03-21T17:51:22.907 回答