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=&quot;return validateFileExtension(this)&quot;"
               id="file_select" />

输入类型=文件不应该有一个value =属性（即使它确实存在，你也不应该把javascript放在那里！）

你也有一些形式的JavaScript：

onsubmit="return validateFileExtension(this.userfile)"

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

修改

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

In the jQuery docs:

表单及其子元素不应使用与表单属性冲突的输入名称或ID，例如submit，length或method。名称冲突可能导致混乱的故障。有关规则的完整列表以及检查这些问题的标记，请参阅DOMLint。

但是：

您应该考虑@ Abdul的解决方案，因为工作提交会让您远离您的信息。

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

Answer 2

您应该考虑使用jquery form plugin提交表单和jquery validate plugin来验证表单的文件扩展名和所有内容.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;
    }
  });

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

3 个答案: