Question

请考虑以下形式：

HTML：

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File">
    <iframe name="hiddenIframe" id="hiddenIFrame"></iframe>
</form>
<div id="myButton" onclick="submitFile()">Submit</div>
<input type="hidden" id="fileID" value="">

以下jQuery脚本允许我上传文件：

<script> 
    $(document).ready(function() { 
        $('#fileUploadButton').click(function(){
            $('#uploadFile').submit();
        });
    }); 
</script>

运行脚本后，新上传文件的id（来自数据库）将被插入隐藏的输入字段id="fileID"所有这一切都正常。但是，我想要做的是点击<div id="myButton">

触发上面的表单提交

function submitFile() {
    $(document).ready(function() {
        if ($('input[name=files]').val() != "")
        {
            $('#uploadFile').submit(function(){
                $.ajax({
                    type: "POST",
                    url: 'my_file.php',
                    success: function(data){
                        $('#fileID').val(data);
                    }
                });
            });
        }
    });
}

我无法使上述脚本生效。文件上传表单未提交。关于如何使其发挥作用的任何建议？

更新我从按钮中删除了onclick="submitFile()"并尝试了此操作，但它不起作用。为什么呢？

<script>
    $(document).ready(function() { 
        $(document).on('click','#myButton',function(){
            $('#uploadFile').submit(function(){
                    $.ajax({
                        type: "POST",
                        url: 'my_file2.php',
                        success: function(data){
                            $('#fileID').val(data);
                        }
                    });
                });
            });
        });
</script>

更新2：如果我点击文件提交按钮（id="fileUploadButton"），则表单将在iframe中提交，因为它应该是。但是，如果我尝试使用我更新的脚本（来自UPDATE：...上面）通过单击按钮（id="myButton"）来提交表单，那么它就不起作用。

Answer 1

修改

如果你查看浏览器控制台，你能看到日志吗？

$(document).on('click', '#myButton', function() { console.log('click'); $('#uploadFile').submit(function(e){ e.preventDefault(); console.log('submit'); }); return false });

使用on()尝试此操作，也取决于您是否要对网页进行回发，然后您不需要on()和ajax

$('#uploadFile').on('click', function(){ $.ajax({ type: "POST", url: 'my_file.php', success: function(data){ $('#fileID').val(data); } }); return false; });

Answer 2

您首先不需要任何事件处理程序; <input type="submit">已经要提交表单。至于另一个按钮，只需按照原来的第一个按钮进行操作：

$(document).ready(function() {
    $('#myButton').click(function() {
        $('#uploadFile').submit();
    });

    $('#uploadFile').submit(function() {
        $.ajax({
            type: "POST",
            url: 'my_file.php',
            success: function(data) {
                $('#fileID').val(data);
            }
        });
    });
});

然后在附加单击处理程序的同时附加提交处理程序。这里没有动态附加处理程序。

强调要点： #fileUploadButton不需要JavaScript来自然地做它。

P.S。您不希望您的Ajax请求实际包含某些内容吗？

如何使用jQuery触发表单提交？

2 个答案: