1

考虑这种形式：

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") 来提交表单，则它不起作用。

4

2 回答 2

1

EDIT

If you look in the browsers console, can you see the logs?

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

   return false
});

Try this using on() instead, also depends if you want to do a postback of the page then you dont need the on() and ajax

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

        return false;
 });
于 2013-05-05T17:34:01.347 回答
0

You don't need any event handler in the first place; an <input type="submit"> is already going to submit the form. As for the other button, just have it do what you originally had for the first button:

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

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

Then you attach the submit handler at the same time as you attach the click handler. No handlers are attached dynamically here.

To stress the point: #fileUploadButton doesn’t need JavaScript to do what it does naturally.

P.S. Don’t you want your Ajax request to actually contain something?

于 2013-05-05T17:33:04.757 回答