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

    
    
    
    
    
    
    
    
    
    



    
图片上传
    

        {% csrf_token %}
        
        
             清空数据
        
    
    

        

            {# 1. 添加附件的按钮 #}
            
                 上传附件
            

            {# 2. 上传图片的插件 #}
            
        

        {# 3. 显示上传的文件 #}
        

            

            

                
Photo
            
            
            

            
        
    

    

        

            

                
Uploading...
            
            

                

                    
0%
                
            
        
    

页面效果：

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(
                    "" + data.result.name + ""
                )
            }
        }
    });
});

效果：

 

拖入文件上传：

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

 

效果：

 

转载于:https://www.cnblogs.com/pyghost/p/10832452.html