django文件——django + jquery-file-upload上傳篇(二)-- 插件實現文件上傳+進度條顯示 +拖入文件上傳


django + jquery-file-upload 插件實現文件上傳+進度條顯示

1.model.py

class Fujian(models.Model):
    name = models.CharField(max_length=32,verbose_name="附件名稱")
    file = models.FileField(upload_to="upload/%Y/%m/%d/")
    uploaded_at = models.DateTimeField(auto_now_add=True)
    def __str__(self):
        return self.name

2.forms.py

class FujianForm(forms.ModelForm):
    class Meta:
        model = Fujian
        fields = ('file',)

3.views.py

def fujian_add(request):
    if request.method == 'POST':
        form = FujianForm(request.POST,request.FILES)
        if form.is_valid():
            fujian = form.save()
            data = {'is_valid':True,'name':fujian.file.name,'url':fujian.file.url}
        else:
            data = {'is_valid':False}
        return JsonResponse(data)

    if request.method == 'GET':
        return render(request,"fujian_add.html")

4.fujian_add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>附件上傳</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script src="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
    <script src="/static/jquery-file-upload/jquery.iframe-transport.js"></script>
    <script src="/static/jquery-file-upload/jquery.fileupload.js"></script>
    <script src="/static/js/base.js"></script>
</head>
<body>
<div class="container">
    <h1>圖片上傳</h1>
    <form method="post" action="">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.path }}">
        <button type="submit" class="btn btn-danger pull-right">
            <span class="glyphicon glyphicon-trash"></span> 清空數據
        </button>
    </form>
    <div>
        <div style="margin-bottom: 20px;">
            {# 1. 添加附件的按鈕 #}
            <button type="button" class="btn btn-primary js-upload-photos">
                <span class="glyphicon glyphicon-cloud-upload"></span> 上傳附件
            </button>

            {# 2. 上傳圖片的插件 #}
            <input id="fileupload" type="file" name="file" multiple
                   style="display: none;"
                   data-url="/fujian/add/"
                   data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
        </div>

        {# 3. 顯示上傳的文件 #}
        <table id="gallery" class="table table-bordered">
            <thead>
            <tr>
                <th>Photo</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!--進度條模態框-->

<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Uploading...</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
</div>
</div>
</div>
</body> </html>

頁面效果:

5.需要引入jquery-file-upload的js文件

 

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery-ui.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<script src="/static/jquery-file-upload/jquery.iframe-transport.js"></script>
<script src="/static/jquery-file-upload/jquery.fileupload.js"></script>
<script src="/static/js/progress-bar-upload.js"></script>

 

 

 

6.urls.py文件

 

from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^fujian/add/$', views.fujian_add),
]

 7.progress-bar-upload.js

$(function () { $(".js-upload-photos").click(function () { $("#fileupload").click(); }); $("#fileupload").fileupload({ dataType: 'json', sequentialUploads: true,  /* 1. SEND THE FILES ONE BY ONE 這個屬性指示該組件一次發送一個文件*/ start: function (e) {   /* 2. WHEN THE UPLOADING PROCESS STARTS, SHOW THE MODAL */ $("#modal-progress").modal("show"); }, stop: function (e) {  /* 3. WHEN THE UPLOADING PROCESS FINALIZE, HIDE THE MODAL */ $("#modal-progress").modal("hide"); }, progressall: function (e, data) {  /* 4. UPDATE THE PROGRESS BAR */
            var progress = parseInt(data.loaded / data.total * 100, 10); var strProgress = progress + "%"; $(".progress-bar").css({"width": strProgress}); $(".progress-bar").text(strProgress); }, done: function (e, data) { if (data.result.is_valid) { $("#gallery tbody").prepend( "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>" ) } } }); });

效果:

 

拖入文件上傳:

在fujian_add.html下面加上以下代碼:

<div class="well text-muted text-center" style="padding-top: 4rem; padding-bottom: 4rem;">
     <span class="glyphicon glyphicon-arrow-down" style="font-size: 4rem;"></span>
     <h3>拖入文件上傳</h3>
</div>

 

效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM