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表单提交插件不张贴文件输入

回答

相关问题