Question

我想在下面填写表单，并以某种方式调整它以在用户选择文件时提交表单。我怎么能这样做？

<div id=uploadform style="width:500px;margin-left:auto;margin-right:auto;">
    <form enctype="multipart/form-data" action='' method='POST'> 
        <input type="file" name="imagefile" class=browse>
        <input type='submit' value='Upload' class=uploadsubmit onClick="if($('#loading').css('display') == 'none') { $('#loading').show('fast'); $(this).hide('fast'); };">
        <input type='hidden' value='1' name='submitted' /> 
    </form> 
</div>
<div id=loading style="display:none;">
    <img src=uploading.gif>
</div>

由于按钮不存在（理想情况下），如何在提交后仍然显示我的图像加载层？

为了澄清，我希望提交按钮本身消失，当用户选择文件时，提交表单并显示#loading层。

Answer 1

您可以捕获提交事件：

$("#uploadform form").submit(function()
{
    $("#uploadform").hide();
    $("#loading").show();
});

Answer 2

您可以对文件元素使用onChange事件处理程序，但已知存在浏览器不兼容问题，但jquery可能会为您处理。然后当然在事件处理程序中，您将提交表单并显示您的加载对话框。如果你想避免刷新页面，那么表单必须在IFrame中提交，否则你的加载对话框将不会显示很长时间......：）

在文件选择上提交文件上传/表单

2 个答案: