不使用标记字符串中的javascript节点上传Django图像

时间:2015-07-08 11:09:31

标签: javascript html django forms file-upload

我创建了django动态表单,可以点击,但我不知道为什么图片没有上传。

我没有请求.FILES并添加了。我还添加了enctype =" multipart / form-data"但它也没有帮助。

所以这是我的模板代码:

{% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'Vote/style.css' %}" />
<fieldset id="fieldset">
    <form method = 'POST' action = '' enctype="multipart/form-data">{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
        <div id="placeholder">

        </div>
        <p>
            <button type="button" name="Submit" onclick="Add();">+</button>
        </p>
        <input type = 'submit' value="create"/>
    </form>
</fieldset>
<script type='text/javascript'>
{#    document.write(code);#}
    var _counter = 0;
    var template = document.createTextNode('');
    function appendStringAsNodes(element, html)
    {
        var frag = document.createDocumentFragment(),
            tmp = document.createElement('body'), child;
        tmp.innerHTML = html;
        // Append elements in a loop to a DocumentFragment, so that the browser does
        // not re-render the document for each node
        while (child = tmp.firstChild) {
            frag.appendChild(child);
        }
        element.appendChild(frag); // Now, append all elements at once
        frag = tmp = null;
    }
    function Add() {
        var code = '<div id="template">' +
                '<p>' +
                    '<fieldset id="fieldsets">' +
                        '<legend id="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
                       ' <form method = "POST" action = "" enctype="multipart/form-data">'+
                              '<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token }}" />' +
                            '<p><label for="id_name">Name:</label> <input id="id_name" maxlength="50" name="name" type="text" /></p>'+
                            '<p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file"/></p>'+
                        '</form>' +
                   ' </fieldset>' +
                '</p>'
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>

这是我的views.py代码:

def voting(request,pk):
    voting_num = VoteType.objects.get(pk=pk).vote_set.count()
    if voting_num >= 2:
        Voted1 = VoteType.objects.get(pk=pk).vote_set.order_by('?').first()
        Voted2 = VoteType.objects.get(pk=pk).vote_set.order_by('?')[2]
        while Voted1 == Voted2:
            Voted2 = Vote.objects.order_by('?')[2]
        context = RequestContext(request, {
            'voted1': Voted1,
            'voted2': Voted2,
            'voting_num': voting_num
        })
    else:
        context = RequestContext(request, {
            'voting_num': voting_num
        })

    return render(request, 'Vote/voting.html', context)

我写

print voteTypeForm.is_valid()
        print voteForm.is_valid()
        something = request.FILES.get('image')
        print request.FILES
        print something

打印数据是:

True
False
<MultiValueDict: {}>
None

为什么文件没有上传?

我检查并在html中添加了图片上传代码,而不是将其放在javascript代码中。当我这样做时,它运行得很好,但是当我尝试将它放在javascript &#39; <&strong>变量中并在appendStringNodes中使用它时,它不起作用。所以问题应该在javascript中。我该如何解决?

1 个答案:

答案 0 :(得分:0)

正如@schillingt在评论中回答的那样。问题是在javascript代码中有另一个。拿走之后。问题解决了。

这是我的代码:

{% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'Vote/style.css' %}" />
<fieldset id="fieldset">
    <form method = 'POST' action = '' enctype="multipart/form-data">{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
        <div id="placeholder">
{#        <p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file"/></p>#}
        </div>
        <p>
            <button type="button" name="Submit" onclick="Add();">+</button>
        </p>
        <input type = 'submit' value="create"/>
    </form>
</fieldset>
<script type='text/javascript'>
{#    document.write(code);#}
    var _counter = 0;
    var template = document.createTextNode('');
    function appendStringAsNodes(element, html)
    {
        var frag = document.createDocumentFragment(),
            tmp = document.createElement('body'), child;
        tmp.innerHTML = html;
        // Append elements in a loop to a DocumentFragment, so that the browser does
        // not re-render the document for each node
        while (child = tmp.firstChild) {
            frag.appendChild(child);
        }
        element.appendChild(frag); // Now, append all elements at once
        frag = tmp = null;
    }
    function Add() {
        var code = '<div id="template">' +
                '<p>' +
                    '<fieldset id="fieldsets">' +
                        '<legend id="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
{#                       ' <form method = "POST" action = "" enctype="multipart/form-data">'+#}
                              '<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token }}" />' +
                            '<p><label for="id_name">Name:</label> <input id="id_name" maxlength="50" name="name" type="text" /></p>'+
                            '<p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file"/></p>'+
{#                        '</form>' +#}
                   ' </fieldset>' +
                '</p>'
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>

求助@schillingt