django文件——django + jquery-file-upload上传篇（一）-- 插件实现文件上传-蒲公英云

django文件——django + jquery-file-upload上传篇（一）-- 插件实现文件上传

Bertha 。 2022-01-13 05:05 396阅读 0赞

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>
</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/base.js"></script>

6.urls.py文件

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

7.base.js文件

$(function () {
/* 1. OPEN THE FILE EXPLORER WINDOW */
    $(".js-upload-photos").click(function () {
        $("#fileupload").click();
    });
  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
    $("#fileupload").fileupload({  //fileupload
        dataType: 'json',
        done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER  这里的data来自于JsonResponse传来的data*/
              if (data.result.is_valid) {
                  $("#gallery tbody").prepend(
                      "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
                  )
            }
        }
    });
});

补充：

django 的 FileField字段upload参数控制上传的文件存放位置：

1.django在upload_to上内置了strftime（）函数，将upload_to设置成 upload_to=”upload/%Y/%m/%d”,上传的文件将存放为 upload/2019/05/08/test.png

2.将upload_to 设置成 upload_to = “upload/“,上传的文件将存放为 upload/test.png

3.更加高级的设置，django还允许你重写一个upload_to函数，重定义上传文件的路径前缀：

#让上传的文件路径动态地与user的名字有关
def upload_to(instance, fielname):
    return '/'.join([MEDIA_ROOT, instance.user_name, filename])
class User(models.Model):
    avatar = ImageField(upload_to = upload_to)
    user_name = CharField(max_length = 250)