Question

我有这样的表格：

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

这份文件。已经：

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

Answer 1

在表单中添加enctype =“multipart / form-data”属性。

Answer 2

尝试将输入imageurl的类型从url更改为text：

FROM：

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

TO：

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

我不确定，但由于image_url的无效类型属性，jquery插件可能无法序列化表单。

Answer 3

嘿，你只是忘了添加---＆gt;表单标记中的enctype =“multipart / form-data”。这将帮助你。

Answer 4

这可能不是这样，但确定服务器端没有拼写错误？就像你会使用$ _FILE而不是$ _FILES？你能发贴相关的php吗？

另外，绝对不是问题，但建议关闭输入标签，现在就像这样：

<input ... />

Answer 5

我认为您在javascript中绑定时无法识别您的文件存在问题。

尝试将提交触发器事件与另一个live（）函数绑定

即。变化

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

到

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

Answer 6

...........我在文件请求中找错了地方。

服务器端应该是：

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

而不是

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

我完全失败了。

Answer 7

确保您测试的文件不在最大文件大小之外，值得在HTML中进行设置。

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

此外，在没有显示器的情况下进行测试：在表单工作之前可能没有值;您正在测试哪种浏览器？

jquery ajax表单提交插件不发布文件输入

7 个答案: