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

Bertha 。 2022-01-13 05:05 280阅读 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>

**页面效果：**

**![1483079-20190508152655370-1868773314.png][]**

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

`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)

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

[1483079-20190508152655370-1868773314.png]: /images/20220113/09d6ad894e7e4286aa2afd0eb35b14e8.png