javascript – jQuery提交表单文件选择不起作用

我试图在用户选择文件后立即上传文件.表单应该消失,取而代之的是“上传图片…”消息.

到目前为止,我得到的只是隐藏的表单(和消息显示),但上传没有发生.表格未提交.有什么想法吗？

这是JS

<script>
$(function(){
    $("#file_select").change(function(){
        $(this).parents("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>

和HTML

    <div class="float_left" id="upload_form_div"> 
        <h3>Select a picture for your profile (4 MB max):</h3> 
        <form action="http://example.com/profile/upload_picture" 
            id="upload_form" 
            enctype="multipart/form-data" 
            method="post" accept-charset="utf-8">

            <input type="file" name="userfile" 
                   id="file_select" /> 
             <input type="hidden" name="upload" value="upload" /> 

         <button id="submit" type="submit"><img height="24" width="24"
                   alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png"> 
                    <span>Upload</span> 
              </button> 
        </form>

        <form action="http://example.com/profile/remove_picture" 
              method="post" accept-charset="utf-8">
        <button type="submit"><img height="24" width="24" 
             alt="Remove" src="images/icons/small/white/trashcan.png"> 
            <span>Remove</span> 
        </button> 
        </form>
</div> 
  <div id="loading" style="display:none;"> 
         Uploading your picture...
   </div>

解决方法:

它可能与这部分有关：

 <input type="file" name="userfile" 
               value="onchange=&quot;return validateFileExtension(this)&quot;"
               id="file_select" /> 

输入类型=文件不应该有一个value =属性(即使它确实如此,你也不应该把javascript放在那里！)

你在表单中也有一些javascript：

onsubmit="return validateFileExtension(this.userfile)" 

如果函数validateFileExtension()返回false,则表单将不会提交.
但是,编写jQuery的方式意味着仍然会显示该消息.

编辑：

将提交按钮上的ID更改为“提交”以外的其他内容.

In the jQuery docs:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see 07001.

然而：

你应该考虑@Abdul的解决方案,因为工作提交将带你离开你的消息.

如果您正在使用CodeIgniter而您不想使用Ajax,则应考虑使用Flash功能在表单提交后向用户显示消息.