Question

我正在尝试将文件上传到我单击按钮时创建的PHP脚本。我只是在JavaScript的前几个小时，我真的不理解JS v动态加载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);
});

提前感谢您的帮助！

森

Answer 1

使用jQuery here阅读文档ready- $ .ready here和Ajax调用。

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

$("#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;
    });
});

Answer 2

您无法为禁用按钮设置onclick或任何侦听器。我在Google之后发现了一点。

我改变了

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

到

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

一切都按预期工作。

Onclick FIle上传DOM PHP Jquery

2 个答案: