jQuery提交表單上的文件選擇不起作用

我試圖在用戶選擇文件後立即啓動文件的上傳。該表單應該消失，取而代之的是「上傳圖片...」消息。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>

來源

2011-04-21 pepe

我加入到我的回答如下 - 在這裏解決了這個問題對我來說：http://jsfiddle.net/q3J4R/ – willoller 2011-04-21 15:54:48

它可能有一些與此有關的部分：

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

輸入類型=文件不應該有一個值=屬性（即使它是這樣，你不應該把JavaScript放在那裏！）

您還可以在表單中一些javascript：

onsubmit="return validateFileExtension(this.userfile)"

如果函數返回validateFileExtension()然後false表單不會提交。但是，您編寫jQuery的方式意味着該消息仍會顯示。

編輯：

變化的提交按鈕的ID爲除「提交」以外的東西。

In the jQuery docs:

形式及其子元素不應該使用輸入名稱或ID與表格的屬性，如提交，長度或方法衝突。名稱衝突可能導致令人困惑的失敗。有關規則的完整列表並檢查您的標記是否存在這些問題，請參閱DOMLint。

但是：

你應該考慮@ Abdul的解決方案，因爲工作提出將帶你從你的消息了。

如果您使用的是CodeIgniter並且您不想使用Ajax，則應該考慮在表單提交後使用Flash功能將消息顯示給用戶。

來源

2011-04-21 04:27:51 willoller

感謝@willoller - 這是我的CodeIgniter代碼中的一個錯字 - 但即使我刪除它仍然不起作用 - 任何其他想法？ – pepe 2011-04-21 04:31:57

is validateFileExtension（）返回true？ – willoller 2011-04-21 04:34:58

我刪除了所有驗證腳本，但仍未提交表單 – pepe 2011-04-21 04:38:36

您應該考慮使用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(); 
    });

來源

2011-04-21 05:22:14

謝謝阿卜杜勒 - 我會研究這個 - 我也即使它們輕量級，也要避免過多的jQ插件 – pepe 2011-04-22 03:10:17

提交關於文件選擇形式和驗證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; 
    } 
    });

來源

2011-08-11 19:03:34

jQuery提交表單上的文件選擇不起作用

回答

相關問題