jQuery 在文件选择上提交表单不起作用

Question

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

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

这是 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>

Answer 1

它可能与这部分有关：

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

输入类型=文件不应该有值=属性（即使有，你也不应该把javascript放在那里！）

你还有一些表单中的javascript：

onsubmit="return validateFileExtension(this.userfile)" 

如果函数 validateFileExtension() 返回 false 那么表单将不会提交。
但是，您编写 jQuery 的方式意味着该消息仍然会出现。

---

编辑：

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

在 jQuery 文档中：

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突可能会导致混乱的故障。有关规则的完整列表以及检查标记是否存在这些问题，请参阅 DOMLint。

---

但是：

您应该考虑@Abdul 的解决方案，因为工作提交将使您远离您的消息。

如果您正在使用 CodeIgniter 并且不想使用 Ajax，则应考虑使用 flash 功能在表单提交后向用户显示消息。

Answer 2

您应该考虑使用 jquery 表单插件 提交表单并 jquery 验证插件 用于验证表单的文件扩展名和所有内容。Jquery 表单插件使用 ajax 提交表单。这样您就不会被重定向到表单操作。还
如果你愿意，你可以考虑使用 jquery 对话框来显示结果。

 $("#upload_form").validate({
          rules: {
        MyFile: {
          required: false,
          accept: "jpg|jpeg|png|gif"

        }
      }
    });


  $("#file_select").change(function(){
       ("#upload_form").ajaxSubmit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });

Answer 3

提交文件选择表单并验证 CSV 文件输入

 $('#file').change($('form').submit());
 $('form').submit(function(){
    if($('#file').val().toLowerCase().indexOf('.csv') != -1){
      $('#spinner').show();
      return true;
    }
    else{
      alert('Invalid File format. Please, upload CSV file')
      return false;
    }
  });