Fatal编程技术网
  • javascript/
  • Javascript Python Django进度条Django进度条上传

Javascript Python Django进度条Django进度条上传

javascript python django

Javascript Python Django进度条Django进度条上传,javascript,python,django,django-forms,django-templates,Javascript,Python,Django,Django Forms,Django Templates,我正在尝试使用此模块'django progressbarupload'（）。我完全按照github页面上的安装说明进行了操作，但在Chrome或Firefox中都无法获得上传栏 设置settings.py文件的说明非常简单，我的admin.py设置如下： ## For the Model Admins for the File Upload classes ( Video and Audio ) from django.contrib import admin ## Get the form

我正在尝试使用此模块'django progressbarupload'（）。我完全按照github页面上的安装说明进行了操作，但在Chrome或Firefox中都无法获得上传栏

设置settings.py文件的说明非常简单，我的admin.py设置如下：

## For the Model Admins for the File Upload classes ( Video and Audio )
from django.contrib import admin

## Get the forms
from django import forms

## Import the file models
from models import VideoFile
from models import AudioFile

## For the progress bar
class UploadAudioFileModelForm(forms.ModelForm):
    class Meta:
        model = AudioFile
class UploadVideoFileModelForm(forms.ModelForm):
    class Meta:
        model = VideoFile

## For the progress bar
class UploadAudioFileModelAdmin(admin.ModelAdmin):
    change_form_template = 'progressbarupload/change_form.html'
    add_form_template = 'progressbarupload/change_form.html'
    form = UploadAudioFileModelForm
    class Media:
        js = ("http://code.jquery.com/jquery.min.js",)
## For the progress bar
class UploadVideoFileModelAdmin(admin.ModelAdmin):
    change_form_template = 'progressbarupload/change_form.html'
    add_form_template = 'progressbarupload/change_form.html'
    form = UploadAudioFileModelForm
    class Media:
        js = ("http://code.jquery.com/jquery.min.js",)

admin.site.register(VideoFile, UploadVideoFileModelAdmin)
admin.site.register(AudioFile, UploadAudioFileModelAdmin)
这是我的上传模板：

{% extends "base.html" %}

{% load progress_bar %}

{% block title %}Upload your !{% endblock %}

{% block content %}

<h1>Upload Information -</h1>

        {% if form.errors %}
        <p class="error">
                Please correct the error{{ form.errors|pluralize }} below.
        </p>
        {% endif %}

        <script type="text/javascript" src="../media/js/jquery.formset.js"></script>
        <script type="text/javascript">
           $(function() {
               $('#upload_formset ul').formset({
                        addText: 'Add a new Stop',
                        deleteText: 'Remove this Stop'
                });
           })
        </script>
        <script type="text/javascript" src="../media/js/progress_bar.js"></script>

        <form id="upload_formset" action="" method="POST" enctype="multipart/form-data"> {% csrf_token %}
                <table>
                {{ form.as_table }}
                </table>
        <br><br/>

        <table>
        {{ formset.management_form }}
        {% for forms in formset.forms %}
                <ul>
                {{ forms.as_p }}
                </ul>
        {% endfor %}

        </table>

        <br><br/>

        {% progress_bar %}

        <input type="submit" value="Submit!">

        </form>

{% endblock %}

{%extends“base.html”%}
{%load progress_bar%}
{%block title%}上传您的内容！{%endblock%}
{%block content%}
上传信息-
{%if form.errors%}


请更正下面的错误{form.errors | pluralize}}。


{%endif%}
$（函数（）{
$（'#上传_formsetul'）.formset({
addText:“添加新站点”，
deleteText:“删除此停止”
});
})
{%csrf_令牌%}
{{form.as_table}}



{{formset.management_form}
{%formset.forms%}

    
{{forms.as_p}}


{%endfor%}



{%progress\u bar%}
{%endblock%}
以下是my base.html：

{% load static %}
{% load progress_bar %}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">

<head>

        <link rel="stylesheet" type="text/css" href="{% static "css/base_style.css" %}">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block additional_head_info %}{% endblock %}

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

</head>

<body>

        <h1>Welcome to the Website!</h1>

        {% if not user.is_authenticated %}
        <a href="/accounts/login/?next=/">login</a> | <a href="/accounts/register/">register</a> | <a href="/">home</a>
        {% endif %}

        {% if user.is_authenticated %}
        <a href="/accounts/logout/?next=/">logout</a> | <a href="/">home</a> | <a href="/upload/">upload</a>
        {% endif %}

        {% block content_title %}{% endblock %}
        {% block content %}{% endblock %}
        {% block footer %}

        <hr>
        <img src="{% static "img/debian-logo.png" %}" alt="Tours Logo"/>
        <p>Thanks for visiting - more content coming soon....</p>
        {% endblock %}

</body>

</html>

{%load static%}
{%load progress_bar%}
{%block title%}欢迎光临！{%endblock%}
{%block附加\u head\u info%}{%endblock%}
欢迎访问该网站！
{%如果不是user.is_身份验证%}
|  | 
{%endif%}
{%if user.u经过身份验证%}
|  | 
{%endif%}
{%block content_title%}{%endblock%}
{%block content%}{%endblock%}
{%block footer%}


感谢访问-更多内容即将发布

{%endblock%}
以下是Django呈现后我的网页的来源：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/static/css/base_style.css">
<title>Upload your !</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1>Welcome to the '' Website!</h1>
<a href="/accounts/logout/?next=/">logout</a> | <a href="/">home</a> | <a href="/upload/">upload</a>
<h1>Upload Information -</h1>
<script type="text/javascript" src="../media/js/jquery.formset.js"></script>
<script type="text/javascript">
$(function() {
$('#upload_formset ul').formset({
addText: 'Add a new Stop',
deleteText: 'Remove this Stop'
});
})
</script>
<script type="text/javascript" src="../media/js/progress_bar.js"></script>
<form id="upload_formset" action="" method="POST" enctype="multipart/form-data"> <input type='hidden' name='csrfmiddlewaretoken' value='O6NmPrifvScHP9IUXJIdaf0wnlrGFQgU' />
<table>
<tr><th><label for="id_name"> Name:</label></th><td><input id="id_name" maxlength="100" name="name" type="text" /><br /><span class="helptext">My Awesome </span></td></tr>
<tr><th><label for="id_contact_email">Contact Email:</label></th><td><input id="id_contact_email" name="contact_email" type="text" /><br /><span class="helptext">John.Appleseed@gmail.com</span></td></tr>
<tr><th><label for="id_description"> Description:</label></th><td><textarea cols="40" id="id_description" name="description" rows="10">
</textarea></td></tr>
<tr><th><label for="id_website">Website:</label></th><td><textarea cols="40" id="id_website" name="website" rows="1">
</textarea><br /><span class="helptext">e.g. http://www.ptrackapp.com</span></td></tr>
<tr><th><label for="id_address">Address:</label></th><td><textarea cols="40" id="id_address" name="address" rows="1">
</textarea><br /><span class="helptext">e.g. 1234 Colorado Ave. Denver, Colorado 80201</span></td></tr>
</table>
<br><br/>
<table>
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="2" /><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0" /><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000" />
<ul>
<p><label for="id_form-0-address"> Step:</label> <textarea cols="40" id="id_form-0-address" name="form-0-address" rows="1">
</textarea> <span class="helptext">Enter an Address for this  Stop</span></p>
<p><label for="id_form-0-description"> Step Description:</label> <input id="id_form-0-description" maxlength="250" name="form-0-description" type="text" /> <span class="helptext">Enter some Information about this Stop</span></p>
<p><label for="id_form-0-video"> Step Video File:</label> <input id="id_form-0-video" name="form-0-video" type="file" /> <span class="helptext">max. 42 megabytes</span></p>
<p><label for="id_form-0-audio"> Step Audio File:</label> <input id="id_form-0-audio" name="form-0-audio" type="file" /> <span class="helptext">max. 42 megabytes</span></p>
</ul>
<ul>
<p><label for="id_form-1-address"> Step:</label> <textarea cols="40" id="id_form-1-address" name="form-1-address" rows="1">
</textarea> <span class="helptext">Enter an Address for this  Stop</span></p>
<p><label for="id_form-1-description"> Step Description:</label> <input id="id_form-1-description" maxlength="250" name="form-1-description" type="text" /> <span class="helptext">Enter some Information about this Stop</span></p>
<p><label for="id_form-1-video"> Step Video File:</label> <input id="id_form-1-video" name="form-1-video" type="file" /> <span class="helptext">max. 42 megabytes</span></p>
<p><label for="id_form-1-audio"> Step Audio File:</label> <input id="id_form-1-audio" name="form-1-audio" type="file" /> <span class="helptext">max. 42 megabytes</span></p>
</ul>
</table>
<br><br/>
<progress id="progressBar" data-progress_bar_uuid="131a107d-49ac-4e30-b307-5097dd13e232" value="0" max="100" hidden></progress><script>upload_progress_url = "/progressbarupload/upload_progress"</script>
<input type="submit" value="Submit!">
</form>
<hr>
<img src="/static/img/debian-logo.png" alt=" Logo"/>
<p>Thanks for visiting - more content coming soon....</p>
</body>
</html>


上传你的！
欢迎访问“”网站！
|  | 
上传信息-
$（函数（）{
$（'#上传_formsetul'）.formset({
addText:“添加新站点”，
deleteText:“删除此停止”
});
})
姓名：
我的真棒
联系电子邮件：
约翰。Appleseed@gmail.com
说明：
网站：

例如。http://www.ptrackapp.com
地址:

例如科罗拉多州丹佛市科罗拉多大道1234号，邮编80201




    
步骤：
输入此站点的地址
    
步骤说明：输入有关此站点的一些信息
    
Step视频文件：最大42兆字节
    
Step音频文件：最大42兆字节
    



    
步骤：
输入此站点的地址
    
步骤说明：输入有关此站点的一些信息
    
Step视频文件：最大42兆字节
    
Step音频文件：最大42兆字节
    





upload_progress_url=“/progressbarupload/upload_progress”


感谢访问-更多内容即将发布
页面加载，我可以上传我的文件，但我从来没有看到进度条。我也没有看到FireBug在加载任何脚本时出现任何错误。。。有什么想法吗？谢谢

django progressbarupload存在某种“问题”，请检查此处。如果使用Chrome，进度将显示在Chrome上传栏中（检查屏幕左下角）。

进度栏javascript文件是否实际加载？我在firebug或Chrome的“检查字段”工具中未发现任何错误。所以我假设他们是。