jQuery的Ajax表單提交插件不張貼文件輸入

我有這種形式：jQuery的Ajax表單提交插件不張貼文件輸入

<form id="imageinputpopup" class=suggestionsubmit style="display: none"> 
    <span>Add a thing!</span><br/> 
    <label>url: </label><input name="imageurl" type="url"><br/> 
    <label>file: </label><input name="imagefile" type="file"><br/> 
    <input type='hidden' name='schoolid' class="schoolid"> 
    <input type="submit" value="Submit"> 
</form>

這的document.ready：

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.schoolid').val(get_gmap_value('school_id')); 

    $(".allow-submission").live('click', function(){ 
     if($(this).attr('inputtype')=="colorpicker"){ 
      ..... 
     } else if($(this).attr('inputtype')=="image"){ 
      remove_hidden("#imageinputpopup"); 
      add_fieldname($(this), $("#imageinputpopup")); 
      $("#imageinputpopup").dialog(); 
     } else if($(this).attr('inputtype')=="text"){ 
      .... 
     } else { 
      //nothing 
     } 
    }); 

    $(".suggestionsubmit").submit(function(){ 
     event.preventDefault(); 
     alert($(this).html()); 
     $(this).ajaxSubmit({ 
      url: '/save-school-suggestion/', 
      type: 'post', 
      success: function(response){ 
       response = jQuery.parseJSON(response); 
       // Check for login redirect. 
//    if (response.requireLogin) { 
//     alert('Sign up or log in to save your answer'); 
//    } else { 
        $('.suggestionsubmit').dialog('close'); 
//    } 
      } 
     }); 
    }); 
}); 

    function add_fieldname(element, addto){ 
     var elementname = document.createElement('input'); 
     elementname.type = 'hidden'; 
     elementname.name = 'fieldname'; 
     elementname.value = element.attr('fieldname').replace(' ', '_'); 
     $(elementname).addClass('fieldname'); 
     addto.append(elementname); 
    } 

    function remove_hidden(element){ 
     $(element+' .fieldname').remove(); 
    }

但文件中的字段沒有顯示出來的服務器端。

爲什麼？

我發現這個文檔中：

爲什麼不貼我的所有輸入值？ jQuery表單序列化嚴格遵循HTML規範。只有成功的控件才能提交。

但我不明白爲什麼我的文件控制將無效。我在另一個提交表格在我的網站上的另一個地方，幾乎完全相同，並完美...

編輯：這是其他形式的工作（它有一些額外的東西，但形式標籤只是有一個id，就像問題一樣，輸入標籤也是一樣的）。

<form id="photos-submission-form6"> 

    <input type="hidden" name="section" value="photos"> 
    <input type="hidden" name="school" id="photos-submit-school6"> 


    <div style="margin-bottom: .5em"> 
      <p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p> 
      <img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;"> 
      <div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div> 
     </div> 
    <div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div> 
    <input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username"> 
     <span style="line-height: 40px;"> 
     <label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br> 
     <label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br> 
     <label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); "> 
     </span> 


    <div style="height: 30px; margin-top: 1em; width: 413px;"> 
      <label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label> 
     <input id="photos-tagsinput6" style="display: none;" type="text" name="tags"> 
     <button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button> 
    </div> 
    </form>

來源

2012-04-26 Colleen

這是實際的代碼還是示例？應該將'class = suggestionsubmit'作爲'class =「suggestionsubmit」'的形式嗎？ – 2012-04-26 20:16:37

這是實際的代碼，是的，它應該是，但是改變它並沒有什麼區別，並且令人驚訝的是並沒有首先破壞代碼。 – Colleen 2012-04-26 20:32:23

你有沒有在其他地方的功能圖像上傳（目錄的寫權限，'file_max_size'沒有問題等）？這種形式與另一種形式相比有什麼不同，你說：「我在我的網站上的另一個地方有另一個提交表單」 - 「？還要在表單中加入'method =「post」'。默認是'get'。我懷疑它有幫助，但無論如何它值得一試。 – 2012-04-26 21:06:25

這可能並非如此，但肯定服務器端沒有拼寫錯誤？像你會使用$ _FILE而不是$ _FILES？你可以發佈相關的PHP也？

而且，絕對不是一個問題，但它建議關閉輸入標籤，現在這個樣子：

<input ... />

來源

2012-05-04 08:07:07 Gaet

哈，服務器端是python，不是php，所以它更復雜一點。然而，問題在於該文件實際上並不在帖子中 - 我打印出所有後期服務器端的文件，但它不在那裏，儘管其他所有文件都是。感謝您輸入標籤提示。 – Colleen 2012-05-04 14:38:46

不完全是這個問題（請參閱下面的答案），但我會給予讚譽，因爲這是解決服務器端錯誤的唯一答案。在夜間和鉻 – Colleen 2012-05-09 00:41:09

將enctype =「multipart/form-data」屬性添加到您的表單中。

來源

2012-04-26 19:36:43 DalSoft

沒有這樣做。我的另一種形式也沒有。 – Colleen 2012-04-26 19:39:05

嘗試不顯示：無 – DalSoft 2012-04-26 19:43:42

仍然沒有，我需要的顯示：無，因爲我需要它隱藏，直到點擊。當它獲得對話框（）時，顯示器：無論如何，都不會消失。 – Colleen 2012-04-26 19:50:05

嘗試改變輸入imageurl的類型從url到text：

FROM：

<label>url: </label><input name="imageurl" type="url"><br/>

TO：

<label>url: </label><input name="imageurl" type="text"><br/>

我不知道，但也許是jQuery插件由於image_url的無效類型屬性，無法序列化表單。

來源

2012-05-01 09:09:11

不幸的是，正如所料，我確實得到了imageurl字段，但沒有imagefile。 – Colleen 2012-05-03 15:39:24

嘿，你只是忘了添加---> enctype =「multipart/form-data」在窗體標籤。這會幫助你。

來源

2012-05-04 05:34:41

請參閱DalSoft的回答......我添加了該屬性，它什麼也沒做。 – Colleen 2012-05-04 05:35:25

-1

確保您正在測試的文件不是最大文件大小之外，它會值得在HTML中設置它。

<input type="hidden" name="MAX_FILE_SIZE" value="500" />

而且，測試，而不顯示：雖然，直到你有形式工作沒有可能是值得的;你在測試哪個瀏覽器？

來源

2012-05-07 04:28:50

測試，但我用我的網站的其他部分使用相同的文件... – Colleen 2012-05-07 05:12:13

你使用javascript發佈這兩種形式？這兩個頁面的JavaScript是相同的嗎？你動態加載其他形式的工作嗎？ – 2012-05-08 01:25:02

是的，是的，沒有。 – Colleen 2012-05-08 01:46:19

我覺得你有一個問題，在JavaScript中的綁定不能識別你的文件。

儘量結合你提交觸發事件與另一個現場（）函數

即改變

$(".suggestionsubmit").submit(mooFar(e));

到

$(".suggestionsubmit").live('submit', mooFar(e));

來源

2012-05-08 10:48:39

如上，我想你誤解了這個問題。事件發生，表單帖子，我只是沒有得到我的所有輸入。 – Colleen 2012-05-08 19:31:39

我完全明白了這個問題;表單被破壞是因爲它被動態加載。這是唯一的區別。這是一個解決方案，以確保您完全發佈動態加載的表單。你試過這個嗎？ – 2012-05-08 21:23:06

不，它*不是被動態加載的。它在頁面上，它只是成爲一個對話框，但它的代碼是* there *。而且這兩種形式都以同樣的方式加載，所以這不是「唯一的區別」 - 沒有區別。 – Colleen 2012-05-08 22:45:37

...........我一直在尋找在該文件的請求，放錯了地方。

服務器端應該是：的

if not s.url_field and 'imagefile' in request.FILES: 
    s.image_field = request.FILES['imagefile']

代替

s.image_field = request.POST.get('imagefile', None)

徹頭徹尾的失敗，我的一部分。

來源

2012-05-09 00:40:13 Colleen

jQuery的Ajax表單提交插件不張貼文件輸入

回答

相關問題